五道ES6 Promise题, 助你快速理解Promise

前言

Promise是ES6中新增的特性，现在很多前端框架像AngularJS，Vue等在HTTP请求之后都是返回的Promise处理，因此Promise是必须要掌握的一个知识点。
本文为你提供五道由易到难的ES6 Promise题, 助你快速理解Promise

核心知识点

• Promise在生命周期内有三种状态，分别是pending、fulfilled 和 rejected，状态改变只能是pending->fulfilled(成功)，或者pending->rejected(失败)。而且状态一旦改变，就不能再次改变.
• Promise中调用resolve或reject并不会终结 Promise 的参数函数的执行。

Q1

const promise = new Promise((resolve, reject) => {
  console.log(1);
  resolve();
  console.log(2);
});

promise.then(() => {
  console.log(3);
});

console.log(4);

我们知道Promise的构造函数中代码是同步执行的，但是then方法是异步执行的，then方法需要等到等到resolve函数执行时才得到执行。
输出结果:

1
2
4    
3

Q2

const promise = new Promise((resolve, reject) => {
  resolve('success1');
  reject('error');
  resolve('success2');
});

promise.then((res) => {
  console.log("then: ", res);
}).catch((error) => {
  console.log("catch: ", error);
});

Promise的状态一经改变后，就不会再次改变。
Promise一旦执行了resolve函数后，就不会再执行reject和其他的resolve函数了。一旦Promise执行了reject函数，将会被catch函数捕获，执行catch中的代码。
输出结果:

then: success1

Q3

Promise.resolve(1).then((res) => {
  console.log(res);
  return 2;
}).catch((err) => {
  return 3;
}).then((res) => {
  console.log(res);
});

Promise首先resolve(1)，接着就会执行then函数，因此会输出1，然后在函数中返回2。
因为是resolve函数，因此后面的catch函数不会执行，而是直接执行第二个then函数，因此会输出2。
输出结果:

1
2

Q4

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log("once");
    resolve("success");
  }, 1000)
});

const start = Date.now();

promise.then((res) => {
  console.log(res, Date.now() - start);
})

promise.then((res) => {
  console.log(res, Date.now() - start);
})

首先定义了一个Promise，但是Promise中的代码是放在一个定时器中的，因此会先执行后面的代码。

利用Date.now()方法生成一个时间戳。

然后是在一秒后定时器内部的代码，首先输出一个'once'，然后是执行resolve函数，执行完resolve函数后会执行then方法中的代码.

因为同一个promise只能改变一次状态，在多次调用then方法时会得到相同的上一次resolve的结果。
输出结果:

image.png

Q5

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success');
  }, 1000);
});

const promise2 = promise1.then(() => {
  throw new Error('error');
});

console.log('promise1', promise1);
console.log('promise2', promise2);

setTimeout(() => {
  console.log('promise1', promise1);
  console.log('promise2', promise2);
}, 2000)

先看下结果:

image.png

接下来分析:
上述代码中，分别生成了Promise1和Promise2，它们是两个Promise。

• 首先会打印出promise1，但是promise1中有个定时器，此时还并未执行resolve，因此会处于pending状态。
• promise2是由promise1执行结束后再执行的，因此promise2的状态由promise1来决定.
• 等到定时器一秒后，promise执行了resolve('success')，promise状态变为fulfilled。此时执行promise2，但是在promise2内抛出一个Error，因此控制台会打印出Error的内容。
• 等到2秒钟后，第二个定时器触发，直接输出promise1，此时promise状态已经变为fulfilled，不会再更改，因此输出{'success'}。
• promise2状态已经变为rejected，其内容就为Error: error!!!。

经上述分析后可以得出最终答案。

本文部分内容摘至网络