基于 Promise 的 JavaScript 异步编程-JavaScript中文网-JavaScript教程资源分享门户

JavaScript 是一门单线程的编程语言，但是在实际开发中，我们经常需要进行异步操作，如请求数据、读取文件等。在过去，我们通常使用回调函数来处理异步操作，但是回调函数存在嵌套过深、代码难以维护等问题，因此 Promise 成为了一种更好的异步编程方式。

Promise 简介

Promise 是一种用于异步编程的对象，它代表了一个异步操作的最终完成或失败，并且可以将异步操作的结果以同步的方式进行处理。

Promise 有三种状态：

Pending：表示异步操作正在进行中。
Fulfilled：表示异步操作成功完成。
Rejected：表示异步操作失败。

当 Promise 进入 Fulfilled 或 Rejected 状态时，它的状态就不会再改变。

使用 Promise

我们可以使用 Promise 构造函数来创建一个 Promise 对象：

const promise = new Promise((resolve, reject) => {
  // 异步操作
  // 成功时调用 resolve，失败时调用 reject
});

Promise 构造函数接受一个函数作为参数，这个函数有两个参数，resolve 和 reject。resolve 函数表示异步操作成功时的处理逻辑，reject 函数表示异步操作失败时的处理逻辑。

下面是一个简单的示例，使用 Promise 请求一个 JSON 文件：

// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'data.json');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(new Error(xhr.statusText));
      }
    }
  };
  xhr.send();
});

promise.then((data) => {
  console.log(JSON.parse(data));
}, (error) => {
  console.error(error);
});

在这个示例中，我们使用 XMLHttpRequest 请求一个 JSON 文件，当请求完成时，如果状态码为 200，我们就调用 resolve 函数并传入响应数据，否则调用 reject 函数并传入一个错误对象。然后我们通过 then 方法来处理异步操作的结果，第一个参数是 resolve 函数的处理逻辑，第二个参数是 reject 函数的处理逻辑。

Promise 的链式调用

Promise 提供了链式调用的方式来解决回调函数嵌套的问题，我们可以通过 then 方法来连接多个异步操作，并且可以在每个 then 方法中返回一个新的 Promise 对象。

下面是一个示例，使用 Promise 获取 GitHub 用户的信息和仓库列表：

// javascriptcn.com 代码示例
fetch('https://api.github.com/users/octocat')
  .then((response) => {
    return response.json();
  })
  .then((user) => {
    console.log(user);
    return fetch(user.repos_url);
  })
  .then((response) => {
    return response.json();
  })
  .then((repos) => {
    console.log(repos);
  })
  .catch((error) => {
    console.error(error);
  });

在这个示例中，我们首先使用 fetch 方法获取 GitHub 用户的信息，然后在第一个 then 方法中将响应数据转换成 JSON 格式，并返回一个新的 Promise 对象。在第二个 then 方法中，我们使用 user.repos_url 来获取用户的仓库列表，同样也是将响应数据转换成 JSON 格式，并返回一个新的 Promise 对象。最后，我们使用 catch 方法来处理异步操作的错误。

Promise.all 和 Promise.race

Promise.all 和 Promise.race 是 Promise 提供的两个辅助方法。

Promise.all 方法可以接受一个 Promise 对象数组作为参数，返回一个新的 Promise 对象，当所有 Promise 对象都进入 Fulfilled 状态时，新的 Promise 对象也进入 Fulfilled 状态，返回所有 Promise 对象的结果数组，如果有任何一个 Promise 对象进入 Rejected 状态，则新的 Promise 对象也进入 Rejected 状态，返回第一个进入 Rejected 状态的 Promise 对象的错误信息。

下面是一个示例，使用 Promise.all 方法同时请求多个 JSON 文件：

// javascriptcn.com 代码示例
const promises = [
  fetch('data1.json'),
  fetch('data2.json'),
  fetch('data3.json')
];

Promise.all(promises)
  .then((results) => {
    console.log(results);
  })
  .catch((error) => {
    console.error(error);
  });

在这个示例中，我们使用 fetch 方法同时请求三个 JSON 文件，将返回的 Promise 对象放入一个数组中，然后使用 Promise.all 方法来等待所有 Promise 对象都完成，然后将所有结果放入一个数组中返回。

Promise.race 方法与 Promise.all 方法类似，也接受一个 Promise 对象数组作为参数，但是它只等待第一个 Promise 对象完成，然后返回它的结果或错误信息。

下面是一个示例，使用 Promise.race 方法请求多个 JSON 文件，只返回第一个请求完成的结果：

// javascriptcn.com 代码示例
const promises = [
  fetch('data1.json'),
  fetch('data2.json'),
  fetch('data3.json')
];

Promise.race(promises)
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });

总结

使用 Promise 可以让我们更加方便地进行异步编程，避免了回调函数嵌套和代码难以维护的问题。在实际开发中，我们需要多加练习和实践，掌握 Promise 的使用方法，以及如何处理 Promise 的错误信息。

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