跳到主要内容

JavaScript Promise 及链式调用

提示
  1. 异步操作处理：JavaScript中的Promise用于处理异步操作，它可以处于三种状态：Pending（等待中）、Fulfilled（已完成）或Rejected（已拒绝）。
  2. Promise链：Promise链允许在一个Promise解决后顺序执行另一个异步任务，使用then()、catch()和finally()方法进行管理。
  3. Promise与回调函数的比较：相比回调函数，Promise提供了更易读的语法和更简单的错误处理方式；Promise适用于异步任务，而回调函数也可用于同步任务。

在 JavaScript 中，promise 是处理异步操作的好方法。它用于确定异步操作是否成功完成。

一个 promise 可能有三种状态。

  • Pending（待定）
  • Fulfilled（已完成）
  • Rejected（已拒绝）

promise 开始于 pending 状态。这意味着过程尚未完成。如果操作成功，过程结束于 fulfilled 状态。如果发生错误，过程结束于 rejected 状态。

例如，当你使用 promise 从服务器请求数据时，它将处于 pending 状态。当数据成功到达时，它将处于 fulfilled 状态。如果发生错误，则它将处于 rejected 状态。

创建 Promise​

要创建 promise 对象，我们使用 Promise() 构造函数。

let promise = new Promise(function (resolve, reject) {
  // 执行某些操作
});

Promise() 构造函数接受一个函数作为参数。该函数还接受两个函数 resolve() 和 reject()。

如果 promise 成功返回，将调用 resolve() 函数。如果发生错误，将调用 reject() 函数。

假设下面的程序是一个异步程序。然后该程序可以通过使用 promise 来处理。

示例 1：带有 Promise 的程序​

const count = true;

let countValue = new Promise(function (resolve, reject) {
  if (count) {
    resolve("存在 count 值。");
  } else {
    reject("不存在 count 值");
  }
});

console.log(countValue);

输出

Promise {<resolved>: "存在 count 值。"}

在上述程序中，创建了一个 Promise 对象，它接受两个函数：resolve() 和 reject()。如果过程成功，则使用 resolve()；如果 promise 中发生错误，则使用 reject()。

如果 count 的值为 true，则解决 promise。

JavaScript promise 的工作原理

JavaScript Promise 链式调用​

当你必须处理一个接一个的多个异步任务时，promise 很有用。为此，我们使用 promise 链式调用。

你可以在 promise 解决后使用 then()、catch() 和 finally() 方法执行操作。

JavaScript then() 方法​

当 promise 成功完成或解决时，then() 方法用于回调。

then() 方法的语法是：

promiseObject.then(onFulfilled, onRejected);

示例 2：使用 then() 链式调用 Promise​

// 返回一个 promise

let countValue = new Promise(function (resolve, reject) {
  resolve("Promise 已解决");
});

// 当 promise 成功解决时执行

countValue
  .then(function successValue(result) {
    console.log(result);
  })

  .then(function successValue1() {
    console.log("你可以这样调用多个函数。");
  });

输出

Promise 已解决
你可以这样调用多个函数。

在上述程序中，使用 then() 方法将函数链接到 promise。当 promise 成功解决时，调用 then() 方法。

你可以将多个 then() 方法链接到 promise。

JavaScript catch() 方法​

当 promise 被拒绝或发生错误时，使用回调的 catch() 方法。例如，

// 返回一个 promise
let countValue = new Promise(function (resolve, reject) {
  reject("Promise 被拒绝");
});

// 当 promise 成功解决时执行
countValue
  .then(function successValue(result) {
    console.log(result);
  })

  // 如果发生错误则执行
  .catch(function errorValue(result) {
    console.log(result);
  });

输出

Promise 被拒绝

在上述程序中，promise 被拒绝。并且 catch() 方法与 promise 一起使用来处理错误。

JavaScript promise 链式调用的工作原理

JavaScript Promise 与回调的比较​

promise 与回调函数类似，因为它们都可以用来处理异步任务。

JavaScript 回调函数也可以用来执行同步任务。

它们的区别可以总结如下：

JavaScript Promise​

  1. 语法用户友好且易于阅读。
  2. 错误处理更易于管理。
  3. 示例：
api()
  .then(function (result) {
    return api2();
  })
  .then(function (result2) {
    return api3();
  })
  .then(function (result3) {
    // 执行工作
  })
  .catch(function (error) {
    // 处理此点之前可能发生的任何错误
  });

JavaScript 回调​

  1. 语法难以理解。
  2. 错误处理可能难以管理。
  3. 示例：
api(function (result) {
  api2(function (result2) {
    api3(function (result3) {
      // 执行工作
      if (error) {
        // 做一些事情
      } else {
        // 做一些事情
      }
    });
  });
});

JavaScript finally() 方法​

你也可以在 promise 中使用 finally() 方法。当 promise 成功解决或被拒绝时，将执行 finally() 方法。例如，

// 返回一个 promise
let countValue = new Promise(function (resolve, reject) {
  // 可能被解决或拒绝
  resolve("Promise 已解决");
});

// 添加其他代码块
countValue.finally(function greet() {
  console.log("此代码已执行。");
});

输出

此代码已执行。

JavaScript Promise 方法​

Promise 对象提供了各种方法。

方法描述
all(iterable)等待所有 promise 被解决或任何一个被拒绝
allSettled(iterable)等到所有 promise 被解决或拒绝
any(iterable)一旦任何一个 promise 被实现，返回 promise 的值
race(iterable)等到任何一个 promise 被解决或拒绝
reject(reason)返回一个因给定原因而被拒绝的新 Promise 对象
resolve(value)返回一个以给定值解决的新 Promise 对象
catch()添加拒绝处理器回调
then()添加解决处理器回调
finally()添加一个处理器到 promise

要了解更多关于 promise 的详细信息，请访问 JavaScript Promises。

最后于 更新