jQuery中done和then的区别(详解)

在使用jQuery的过程中，可能会遇到使用done()和then()的情况。这两个方法在执行完成回调时看起来非常相似、可以互换，但它们之间却有一些细微的区别。

done()

done()方法是用来将一个成功的回调函数附加到一个已完成的异步操作上。它返回一个promise对象来处理异步操作的结果。当异步操作成功之后，回调函数会被执行。

下面是一个使用done()方法的示例:

$.ajax({
  url: 'https://jsonplaceholder.typicode.com/todos/1',
  method: 'GET',
}).done(function(response) {
  console.log('Title:', response.title);
}).fail(function(jqXHR, textStatus) {
  console.error('Error:', textStatus);
});

在上面的代码中，当AJAX请求成功时，回调函数会被触发，函数里会打印出返回数据里的标题。

then()

then()方法和done()方法类似，用来附加一个回调函数到一个异步操作上。但是和done()不同的是，then()方法可以接受两个回调函数作为参数：成功回调和失败回调。当异步操作完成时，若成功，则执行成功回调，否则执行失败回调。

以下是一个使用then()方法的示例:

$.ajax({
  url: 'https://jsonplaceholder.typicode.com/todos/1',
  method: 'GET'
}).then(function(response) {
  console.log('Title:', response.title);
}, function(jqXHR, textStatus) {
  console.error('Error:', textStatus);
});

在上面的代码中，如果AJAX请求成功，则会执行第一个回调函数，并打印标题。如果AJAX请求失败，则会执行第二个回调函数并打印错误信息。

区别

虽然done()和then()功能非常相似，但它们之间有一些微小的区别:

1. 返回值不同: done()返回一个新的、已完成的promise对象，而then()方法返回一个新的promise对象，可以通过它来进行链式操作。

2. 参数不同: done()方法只接受一个参数，即成功的回调函数; 而then()方法接受两个参数，即成功回调和失败回调。

3. 异常传递不同: 在使用done()方法时，如果在成功的回调函数中抛出异常，它将不会被传递到链式操作中。而在then()方法中，如果在成功回调函数中抛出异常，它会被传递到链式操作中的下一个then()方法或者最后的catch()方法。

示例

使用done()方法

$.ajax({
  url: 'https://jsonplaceholder.typicode.com/todos/1',
  method: 'GET'
}).done(function(response) {
  console.log('Title:', response.title);
  throw new Error('test');
}).done(function() {
  console.log('Maybe this code will not be executed'); // 不会执行
}).fail(function(jqXHR, textStatus) {
  console.error('Error:', textStatus);
});

在上面的代码中，虽然在第一个done()方法中抛出了一个异常，但是它不会被后面的回调函数捕获，所以第二个done()方法不会被执行。

使用then()方法

$.ajax({
  url: 'https://jsonplaceholder.typicode.com/todos/1',
  method: 'GET'
}).then(function(response) {
  console.log('Title:', response.title);
  throw new Error('test');
}).then(function() {
  console.log('Maybe this code will not be executed'); // 不会执行
}).catch(function(error) {
  console.error('Error:', error.message); // "test"
});

在上面的代码中，当在第一个then()方法中抛出异常时，它会被后面的catch()方法捕获。因此，第二个then()方法不会被执行。

总的来说，done()方法和then()方法在处理异步操作成功后的回调函数上非常相似，但在使用时还是需要注意它们之间的区别。