【JavaScript】异步操作：Promise对象

1 概述

Promise 对象是 JavaScript 的异步操作解决方案，为异步操作提供统一接口。它起到代理作用，充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口。

Promise 的设计思想是，所有异步任务都返回一个 Promise 实例。Promise 实例有一个then方法，用来指定下一步的回调函数。

function f1(resolve, reject) {
  // 异步代码...
}

var p1 = new Promise(f1);
p1.then(f2); // f1的异步操作执行完成，就会执行f2

Promise 使得 f1 和 f2 变成了链式写法，不仅改善了可读性，而且对于多层嵌套的回调函数尤其方便。

2 Promise 对象的状态

Promise 对象通过自身的状态，来控制异步操作。Promise 实例具有三种状态。

• 异步操作未完成（pending）
• 异步操作成功（fulfilled）
• 异步操作失败（rejected）

fulfilled 和 rejected 合在一起称为 resolved（已定型）。

这三种的状态的变化途径只有两种。

• 从“未完成”到“成功”
• 从“未完成”到“失败”

Promise 的最终结果只有两种。

• 异步操作成功，Promise 实例传回一个值（value），状态变为 fulfilled。
• 异步操作失败，Promise 实例抛出一个错误（error），状态变为 rejected。

3 Promise 构造函数

JavaScript 提供原生的 Promise 构造函数，用来生成 Promise 实例。

var promise = new Promise(function (resolve, reject) {
  // ...

  if (/* 异步操作成功 */){
    resolve(value);
  } else { /* 异步操作失败 */
    reject(new Error());
  }
});

Promise 构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己实现。

• resolve 函数的作用是，将 Promise 实例的状态从“未完成”变为“成功”，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去。
• reject 函数的作用是，将 Promise 实例的状态从“未完成”变为“失败”，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done');
  });
}

timeout(100) // timeout(100)返回一个 Promise 实例。100毫秒以后，该实例的状态会变为fulfilled

4 Promise.prototype.then()

Promise 实例的 then 方法，用来添加回调函数。
then 方法可以接受两个回调函数，第一个是异步操作成功时（变为fulfilled状态）的回调函数，第二个是异步操作失败（变为rejected）时的回调函数（该参数可以省略）。

var p1 = new Promise(function (resolve, reject) {
  resolve('成功');
});
p1.then(console.log, console.error);
// "成功"

var p2 = new Promise(function (resolve, reject) {
  reject(new Error('失败'));
});
p2.then(console.log, console.error);
// Error: 失败

then方法可以链式使用。

/*
	p1后面有四个then，意味依次有四个回调函数。只要前一步的状态变为fulfilled，就会依次执行紧跟在后面的回调函数。
*/
p1
  .then(step1)
  .then(step2)
  .then(step3)
  .then(
    console.log,
    console.error
  );

5 then() 用法辨析

Promise 的用法，简单说就是一句话：使用 then 方法添加回调函数。

// 写法一
f1().then(function () {
  return f2();
});

// 写法二
f1().then(function () {
  f2();
});

// 写法三
f1().then(f2());

// 写法四
f1().then(f2);

下面这四种写法都再用 then 方法接一个回调函数 f3。写法一的 f3 回调函数的参数，是 f2 函数的运行结果。

f1().then(function () {
  return f2();
}).then(f3);

写法二的 f3 回调函数的参数是 undefined。

f1().then(function () {
  f2();
  return;
}).then(f3);

写法三的 f3 回调函数的参数，是 f2 函数返回的函数的运行结果。

f1().then(f2())
  .then(f3);

写法四与写法一只有一个差别，那就是 f2 会接收到 f1() 返回的结果。

f1().then(f2)
  .then(f3);

6 微任务

Promise 的回调函数属于异步任务，会在同步任务之后执行。

new Promise(function (resolve, reject) {
  resolve(1);
}).then(console.log);

console.log(2);
// 2
// 1

上面代码会先输出2，再输出1。因为 console.log(2) 是同步任务，而 then 的回调函数属于异步任务，一定晚于同步任务执行。

Promise 的回调函数不是正常的异步任务，而是微任务。它们的区别在于，正常任务追加到下一轮事件循环，微任务追加到本轮事件循环。因此，微任务的执行时间一定早于正常任务。

setTimeout(function() {
  console.log(1);
}, 0);

new Promise(function (resolve, reject) {
  resolve(2);
}).then(console.log);

console.log(3);
// 3
// 2
// 1