Promise 的基本使用及与 $.Deferred 的比较-JavaScript中文网-JavaScript教程资源分享门户

什么是 Promise

Promise 是一种用于异步编程的技术，它可以让我们更方便地处理异步操作的结果。在传统的回调函数中，我们需要将回调函数作为参数传递给异步操作，在异步操作完成后调用回调函数来处理结果。这种方式虽然可行，但是当异步操作嵌套多层时，代码会变得非常难以维护。

Promise 的好处在于它提供了一种更为直观的方式来处理异步操作。我们可以通过 Promise 来封装异步操作，然后通过 Promise 对象来处理异步操作的结果。这种方式可以让我们更方便地组合异步操作，以及更好地处理异步操作的错误。

Promise 的基本使用

Promise 是一个对象，它有三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败）。当我们创建一个 Promise 对象时，它的状态是 pending。

Promise 对象有两个方法，分别是 then 和 catch。then 方法用来注册 Promise 对象成功时的回调函数，catch 方法用来注册 Promise 对象失败时的回调函数。

// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('hello world');
  }, 1000);
});

promise.then((result) => {
  console.log(result); // 输出 hello world
}).catch((error) => {
  console.error(error);
});

在上面的代码中，我们创建了一个 Promise 对象，并在 1 秒后将其状态设置为 fulfilled，并将结果设置为 hello world。然后我们注册了一个成功回调函数，当 Promise 对象的状态变为 fulfilled 时，该回调函数就会被调用，输出 hello world。

Promise 的链式调用

Promise 对象的 then 方法返回的是一个新的 Promise 对象，因此我们可以通过链式调用来组合多个异步操作。

// javascriptcn.com 代码示例
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('hello');
  }, 1000);
});

const promise2 = promise1.then((result) => {
  return result + ' world';
});

promise2.then((result) => {
  console.log(result); // 输出 hello world
});

在上面的代码中，我们创建了两个 Promise 对象，第一个 Promise 对象在 1 秒后将其状态设置为 fulfilled，并将结果设置为 hello。然后我们通过 then 方法注册了一个回调函数，该回调函数返回 result + ' world'，因此第二个 Promise 对象的结果为 hello world。最后我们通过 then 方法注册了另一个回调函数，输出了结果。

Promise 的错误处理

在异步操作中，可能会出现错误。Promise 对象的 catch 方法可以帮助我们处理这些错误。

// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error('something went wrong'));
  }, 1000);
});

promise.catch((error) => {
  console.error(error);
});

在上面的代码中，我们创建了一个 Promise 对象，并在 1 秒后将其状态设置为 rejected，并将错误信息设置为 something went wrong。然后我们注册了一个 catch 回调函数，当 Promise 对象的状态变为 rejected 时，该回调函数就会被调用，输出错误信息。

Promise 和 $.Deferred 的比较

在 jQuery 中，也提供了一种异步编程的技术，它叫做 $.Deferred。$.Deferred 与 Promise 类似，也可以用来处理异步操作的结果。它的基本用法与 Promise 类似，也有 done、fail 和 always 方法，分别用来注册成功、失败和总是执行的回调函数。

// javascriptcn.com 代码示例
const deferred = $.Deferred();

setTimeout(() => {
  deferred.resolve('hello world');
}, 1000);

deferred.done((result) => {
  console.log(result); // 输出 hello world
}).fail((error) => {
  console.error(error);
});

在上面的代码中，我们创建了一个 $.Deferred 对象，并在 1 秒后将其状态设置为 resolved，并将结果设置为 hello world。然后我们注册了一个 done 回调函数，当 $.Deferred 对象的状态变为 resolved 时，该回调函数就会被调用，输出 hello world。

虽然 $.Deferred 和 Promise 都可以用来处理异步操作的结果，但是它们之间还是有一些不同的。下面是一些比较：

Promise 是 ES6 中的标准，而 $.Deferred 是 jQuery 中的实现。
Promise 有更为严格的规范，比如 Promise 对象的状态只能从 pending 转变为 fulfilled 或 rejected，一旦变为 fulfilled 或 rejected，就不能再改变。
Promise 对象的 then 方法返回的是一个新的 Promise 对象，而 $.Deferred 对象的 done、fail 和 always 方法返回的是原对象。
Promise 对象可以通过 Promise.all 和 Promise.race 方法来组合多个异步操作，而 $.Deferred 没有这些方法。

总结

Promise 是一种用于异步编程的技术，它可以让我们更方便地处理异步操作的结果。Promise 对象有三种状态：pending、fulfilled 和 rejected，可以通过 then 和 catch 方法来注册回调函数。Promise 对象可以通过链式调用来组合多个异步操作，也可以通过 catch 方法来处理错误。

与 Promise 类似，$.Deferred 也可以用来处理异步操作的结果，但是它们之间还是有一些不同的。Promise 是 ES6 中的标准，而 $.Deferred 是 jQuery 中的实现。Promise 对象的 then 方法返回的是一个新的 Promise 对象，而 $.Deferred 对象的 done、fail 和 always 方法返回的是原对象。Promise 对象可以通过 Promise.all 和 Promise.race 方法来组合多个异步操作，而 $.Deferred 没有这些方法。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657017f6d2f5e1655d8bda36