📜  JavaScript Promise(1)

📅  最后修改于: 2023-12-03 15:31:38.222000             🧑  作者: Mango

JavaScript Promise

在异步编程中,Promise 是一个非常重要的概念,它可以使异步逻辑更加清晰易懂。

什么是 Promise

Promise 是一种对象,它表示一个异步操作的状态(进行中、已成功、已失败)。Promise 对象接受一个函数作为参数,这个函数会在操作完成时被调用。

Promise 对象有三种状态:

  • pending:初始状态,表示操作还未完成;
  • fulfilled:表示操作成功完成;
  • rejected:表示操作失败。

当 Promise 对象的状态从 pending 转变为 fulfilledrejected 时,就称为 Promise 对象被“解决”(settled)。

如何创建 Promise

要创建一个 Promise 对象,可以使用 Promise 构造函数。可以将异步函数作为参数传递给 Promise 构造函数,这样就可以使用 Promise 来处理异步操作的结果。

Promise 基本语法
const promise = new Promise((resolve, reject) => {
  // 异步操作
});

Promise 构造函数接受一个函数作为参数,这个函数有两个参数 resolvereject

  • resolve 函数会在异步操作成功完成时被调用,表示 Promise 对象已经被“解决”。
  • reject 函数会在异步操作失败时被调用,表示 Promise 对象被拒绝。
Promise 示例

比如,我们可以创建一个 Promise 对象来模拟一个异步操作,返回一个随机数:

const getRandomNumber = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const number = Math.random();
      if (number > 0.5) {
        resolve(number);
      } else {
        reject(new Error('Number is too small'));
      }
    }, 1000);
  });
};

getRandomNumber()
  .then(number => {
    console.log(number);
  })
  .catch(error => {
    console.error(error);
  });

代码中,getRandomNumber 返回一个 Promise 对象,在 1 秒后,Promise 对象的状态可能会变成 fulfilledrejected

如果随机数大于 0.5,Promise 对象被解决,并且会调用 then 方法注册的函数。反之,Promise 对象被拒绝,会调用 catch 方法注册的函数。

Promise 方法

Promise 提供了一些方法来处理异步操作的结果。

then 方法

then 方法可以注册两个回调函数,分别用于处理异步操作成功和失败的结果。

promise.then(onFulfilled, onRejected);
  • onFulfilledonRejected 函数接受 Promise 对象被“解决”时传递的值作为参数。如果 Promise 对象被拒绝,onRejected 函数会接受一个错误信息作为参数。
  • then 方法返回一个 Promise 对象,可以继续使用 then 方法或 catch 方法。
catch 方法

catch 方法用于处理 Promise 对象被拒绝的情况。

promise.catch(onRejected);
  • onRejected 函数接受一个错误信息作为参数。
  • catch 方法返回一个 Promise 对象,可以继续使用 then 方法或 catch 方法。
finally 方法

finally 方法用于在 Promise 对象被解决后,无论是成功还是失败,都会被调用一次。通常用于清理操作。

promise.finally(onFinally);
  • onFinally 函数没有参数。
  • finally 方法返回一个 Promise 对象,可以继续使用 then 方法或 catch 方法。
Promise 的链式调用

由于 Promise 对象的 then 方法和 catch 方法都返回 Promise 对象,我们可以使用链式调用来处理异步操作的结果。

promise
  .then(onFulfilled1, onRejected1)
  .then(onFulfilled2, onRejected2)
  .catch(onRejected3);

在上面的代码中,如果 promise 对象被解决了,会调用 onFulfilled1 方法,返回一个新的 Promise 对象。这个新的 Promise 对象可以继续调用 then 方法,因为它也有 then 方法和 catch 方法。

如果链中的某个 Promise 对象被拒绝了,会调用 onRejected1 方法,并返回一个新的 Promise 对象。这个新的 Promise 对象也可以继续调用 then 方法或 catch 方法。

如果在链的任意一个位置出现错误,会调用 onRejected3 方法,并停止执行后面的代码。

Promise.all 方法

Promise.all() 方法可以并行执行多个异步操作,并在所有异步操作都完成后将结果合并成一个数组。

Promise.all([promise1, promise2, promise3])
  .then(results => {
    console.log(results);
  })
  .catch(error => {
    console.error(error);
  });

在上面的代码中,Promise.all 接受一个由 Promise 对象组成的数组。当所有 Promise 对象都被“解决”后,then 方法的回调函数会接受到一个结果数组。

如果在该数组中的任意一个 Promise 对象被拒绝,则 catch 方法的回调函数会被调用并传递一个错误信息。

Promise.race 方法

Promise.race() 方法可以并行执行多个异步操作,并在其中任何一个异步操作完成时返回结果。

Promise.race([promise1, promise2, promise3])
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error(error);
  });

在上面的代码中,Promise.race 接受一个由 Promise 对象组成的数组。当任何一个 Promise 对象被“解决”后,then 方法的回调函数会接受到该 Promise 对象的结果。

如果该 Promise 对象被拒绝,则 catch 方法的回调函数会被调用并传递一个错误信息。

结论

Promise 可以让异步代码更加清晰易懂,在处理异步操作的结果时提供了一些便利的方法。同时,Promise 可以通过链式调用和并行执行来处理多个异步操作。

使用 Promise,可以让 JavaScript 代码异步编程更加高效,同时提高代码的可读性。