JavaScript高级程序设计记录-Promise

前端

2023-11-10 12:46:28

期约

期约规范及基础

Promise是JavaScript中新增的引用类型，它表示一个异步操作的最终完成或失败及其结果值。Promise有三种状态：

待定（pending）：这是初始状态，表示异步操作尚未完成。
已完成（fulfilled）：表示异步操作已成功完成，并带有结果值。
已拒绝（rejected）：表示异步操作已失败，并带有错误值。

Promise可以通过new操作符来实例化，构造函数接收一个执行器函数（executor）作为参数。执行器函数有两个参数：

resolve：当异步操作成功完成时调用，将Promise的状态从待定变为已完成，并带有结果值。
reject：当异步操作失败时调用，将Promise的状态从待定变为已拒绝，并带有错误值。

使用Promise来等待和并行执行异步操作

我们可以使用then()方法来等待Promise完成。then()方法接收两个参数：

onFulfilled：当Promise的状态变为已完成时调用的函数，该函数接收Promise的结果值作为参数。
onRejected：当Promise的状态变为已拒绝时调用的函数，该函数接收Promise的错误值作为参数。

我们可以使用Promise.all()方法来并行执行多个Promise。Promise.all()方法接收一个Promise数组作为参数，并返回一个新的Promise。新的Promise的状态取决于数组中所有Promise的状态：

如果数组中所有Promise都已完成，则新的Promise的状态变为已完成，并带有数组中所有Promise的结果值。
如果数组中有一个Promise已拒绝，则新的Promise的状态变为已拒绝，并带有该Promise的错误值。

我们可以使用Promise.race()方法来竞争执行多个Promise。Promise.race()方法接收一个Promise数组作为参数，并返回一个新的Promise。新的Promise的状态取决于数组中第一个完成的Promise的状态：

如果数组中第一个完成的Promise已完成，则新的Promise的状态变为已完成，并带有该Promise的结果值。
如果数组中第一个完成的Promise已拒绝，则新的Promise的状态变为已拒绝，并带有该Promise的错误值。

使用async/await来简化异步编程

ES2017引入了async和await，使我们可以更轻松地编写异步代码。async关键字可以声明一个异步函数，await关键字可以等待一个Promise完成。

例如，我们可以使用async/await来并行执行多个Promise：

async function fetchAll() {
  const promises = [
    fetch('https://example.com/api/users'),
    fetch('https://example.com/api/posts'),
    fetch('https://example.com/api/comments'),
  ];
  const responses = await Promise.all(promises);
  const data = await Promise.all(responses.map(r => r.json()));
  return data;
}

使用fetch API来获取网络数据

fetch API是一个用于获取网络数据的现代接口。fetch()方法接收一个请求URL作为参数，并返回一个Promise。Promise的状态取决于请求是否成功：

如果请求成功，则Promise的状态变为已完成，并带有请求的响应对象。
如果请求失败，则Promise的状态变为已拒绝，并带有请求的错误对象。

我们可以使用then()方法来等待fetch()方法完成。then()方法接收两个参数：

onFulfilled：当fetch()方法成功完成时调用的函数，该函数接收请求的响应对象作为参数。
onRejected：当fetch()方法失败时调用的函数，该函数接收请求的错误对象作为参数。

例如，我们可以使用fetch() API来获取https://example.com/api/users的JSON数据：

fetch('https://example.com/api/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));