Promise 中的链式调用到底是什么？

什么是 Promise？

Promise 是 JavaScript 中一种处理异步操作的方式。它通过封装异步操作并返回一个 Promise 对象，来让我们更加方便地处理异步操作。Promise 对象有三种状态：pending（等待中）、fulfilled（已完成）和rejected（已拒绝）。

Promise 的基本用法

Promise 的基本用法如下：

// www.javascriptcn.com code example
const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (/* 异步操作成功 */) {
    resolve(result); // 将 Promise 的状态设置为已完成，并返回结果
  } else {
    reject(error); // 将 Promise 的状态设置为已拒绝，并返回错误信息
  }
});

promise.then(result => {
  // 在 Promise 状态变为已完成后执行的回调函数
}).catch(error => {
  // 在 Promise 状态变为已拒绝后执行的回调函数
});

Promise 的链式调用

Promise 的链式调用是指在一个 Promise 对象上多次调用 then 方法，每次调用都返回一个新的 Promise 对象，并将上一个 Promise 的结果传递给新的 Promise。这样就可以通过链式调用来串联多个异步操作。

// www.javascriptcn.com code example
const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (/* 异步操作成功 */) {
    resolve(result); // 将 Promise 的状态设置为已完成，并返回结果
  } else {
    reject(error); // 将 Promise 的状态设置为已拒绝，并返回错误信息
  }
});

promise.then(result => {
  // 第一个异步操作成功后执行的回调函数
  return new Promise((resolve, reject) => {
    // 第二个异步操作
    if (/* 异步操作成功 */) {
      resolve(result2); // 将 Promise 的状态设置为已完成，并返回结果
    } else {
      reject(error2); // 将 Promise 的状态设置为已拒绝，并返回错误信息
    }
  });
}).then(result2 => {
  // 第二个异步操作成功后执行的回调函数
}).catch(error => {
  // 在 Promise 状态变为已拒绝后执行的回调函数
});

Promise 的指导意义

Promise 的链式调用让我们可以更加方便地处理异步操作，避免了回调地狱的问题。同时，链式调用也让我们的代码更加清晰，易于维护和管理。

在实际开发中，我们可以通过 Promise 的链式调用来串联多个异步操作，比如在前端开发中，我们可以通过 Promise 的链式调用来处理多个 Ajax 请求，从而实现更加复杂的功能。

示例代码

下面是一个使用 Promise 的链式调用来实现异步操作的示例代码：

// www.javascriptcn.com code example
function ajax(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(xhr.responseText);
        } else {
          reject(new Error(xhr.statusText));
        }
      }
    };
    xhr.send();
  });
}

ajax('/api/data1').then(data1 => {
  // 第一个 Ajax 请求成功后执行的回调函数
  return ajax(`/api/data2?data1=${data1}`);
}).then(data2 => {
  // 第二个 Ajax 请求成功后执行的回调函数
  return ajax(`/api/data3?data2=${data2}`);
}).then(data3 => {
  // 第三个 Ajax 请求成功后执行的回调函数
}).catch(error => {
  // 在 Promise 状态变为已拒绝后执行的回调函数
});

上面的代码中，我们通过 Promise 的链式调用来依次处理三个 Ajax 请求，每个请求都会等待上一个请求完成后再执行。这样，我们就可以通过 Promise 的链式调用来实现更加复杂的功能。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d334d1a941bf713460f3c0