JavaScript 中的 Promises 介绍

Question

在 JavaScript 中， promise 是一个表示异步操作的对象。 Promise 有几个方法可以让你注册一个 回调 ，当操作成功或失败时 JavaScript 运行时将调用该回调。

在下面的示例中， Axios HTTP 库 返回一个 Promise。 然后，您可以使用 then() 函数 注册一个回调，当请求成功时 JavaScript 将调用该回调。

const axios = require('axios');

// `axios.get()` returns a promise representing an HTTP request.
const promise = axios.get('https://httpbin.org/get?answer=42');

// The `then()` function lets you register a callback that JavaScript
// will call when the HTTP request succeeds.
promise.then(res => {
  res.data.query.answer; // '42'
});

Promise 作为状态机

您可以将 Promise 视为 状态机 ：

1. 待定 操作正在进行中。
2. 完成 操作成功完成。
3. 拒绝 操作遇到错误。

当一个 Promise 被创建时，它总是处于 pending 。 一旦一个 Promise 被履行或被拒绝，这个 Promise 就被认为是已 解决 ，并且不能再改变状态。 Promise 的状态是私有属性：给定一个 Promise，没有简单的方法可以判断该 Promise 的当前状态是什么。

当一个 Promise 完成时，JavaScript 运行时调用你注册的任何处理函数 .then()， 这 then() 函数有 2 个参数： onFulfilled 和 onRejected，JavaScript 调用 onFulfilled() 如果承诺得到履行，或 onRejected() 如果承诺被拒绝。

// Create a promise that is immediately fulfilled with value 42.
const promise = Promise.resolve(42);

const onFulfilled = () => {};
const onRejected = () => {};

// JavaScript will call `onFulfilled` if the promise is fulfilled,
// and `onRejected` if the promise is rejected.
promise.then(onFulfilled, onRejected);

value 和 error

当一个 Promise 被履行时，JavaScript 会设置一个关联的值。 Promise 的返回值也是私有属性。 访问它的唯一方法是通过 .then() 功能。

// Create a promise that is immediately fulfilled with value 42.
const promise = Promise.resolve(42);

promise.then(value => {
  value; // 42
});

当一个 Promise 被拒绝时，JavaScript 会设置一个相关的错误。 Promise 的相关错误也是私有属性。

// Create a promise that is immediately rejected with an error object
const promise = Promise.reject(new Error('Oops!'));

promise.then(null, err => {
  err.message; // 'Oops!'
});

来了解更多信息 从头开始编写自己的 Promise 库 。

Promise 构造函数

Promise 是 JavaScript 中的内置类。 这意味着您可以使用 new Promise()。

Promise 构造函数有 1 个参数：一个名为 executor，这 executor 函数有两个参数：回调函数 resolve() 和 reject()， 作为创建新承诺的人，您有责任编写 executor 函数，JavaScript 运行时负责传递给你 resolve() 和 reject()。

const promise = new Promise(function executor(resolve, reject) {
  // Fulfill the promise with value '42' after 100 ms.
  setTimeout(() => resolve(42), 100);
});

promise.then(value => {
  value; // 42
});