Promise详解（含面试题精华讲解）！！

这两天一直在看有关Promise的内容，但是不太确定怎样才叫做真正掌握，所以先把目前自己的理解写下来，总结一下。

文章最后的一小节【练习】我也加入了很多遇到的有趣的promise面试题，大家顺便可以检测一下自己的知识是否巩固。

章节直通车：

Promise

概念

Promise是跟随es6出来对异步回调地狱的一种很好的解决方案，之前的很多异步回调是很难检测他报错的，所以就用Promise（承诺）这个单词来向广大程序员保证：“我可以做到”，紧接着风靡前端。（以上都是鬼扯）

Promise是异步的一种解决方案，他有三种状态：pending（等待）、fulfilled（完成）、rejected（失败）。

用法

基础用法

首先根据下面的代码自己脑补一下会打印什么：

new Promise(function(resolve, reject) {
  console.log(1);
  resolve('success');
  console.log(2);
  reject('error');
  console.log(3);
}).then(function(value) {
  console.log('then', value);
}).catch(function(err) {
  console.err('error:', err);
});

正确答案是

1
2
3
then success

我们根据上面的情况来具体聊聊Promise，

Promise必须存在一种状态（pending或fulfilled或rejected）。如果为pending状态，那么可以转换到其他的两个状态；如果为fulfilled状态，那么必须有一个值，并且值和状态不可改变；如果为rejected状态，那么必须有一个原因，并且状态和原因不可改变。

上面的说法是人为约定俗成的（可参考Promise/A+规范），所以我们当我们看到 resolve('success');后面还有reject('error');，因为前者状态已经改变为fulfilled，所以状态不会改变，往后传入值success。

then方法接受两个参数，两个参数都需要为函数，否则会出现值穿透现象；then方法会继续返回一个新的Promise；then需要return一个值，如果没有return值，默认return的为undefined。
由于catch和then返回的都是一个新的Promise，所以他可以继续往后链式调用。

then(function(value) {
  console.log('then', value);
})

这里值传了一个函数，获取到的value是resolve传的字符串success。

catch是语法糖，他其实相当于then(null, function failed() {})。

We have a problem with promises

之所以这个小节是英文名，是因为之前在Twitter上有一个很火的文章 —— 《We have a problem with promises》原文翻译，推荐大家深入看看，这里我就把里面的四道题拿出来，我们继续探讨一下。

判断下面四段代码的区别：

声明：在这些例子中，假定 doSomething() 和 doSomethingElse() 均返回 promises，并且这些 promises 代表某些在 JavaScript event loop (如 IndexedDB, network, setTimeout) 之外的某些工作结束，这也是为何它们在某些时候表现起来像是并行执行的意义。

假设doSomething并没有返回值。

代码1

doSomething().then(function () {
  return doSomethingElse();
}).then(finalHandler);

这里的代码中规中矩，return了一个新的promise，所以后面的then都是基于doSomethingElse返回的promise往后继续执行的。

doSomething
|-----------------|
                  doSomethingElse(undefined)
                  |------------------|
                                     finalHandler(resultOfDoSomethingElse)
                                     |------------------|

代码2

doSomething().then(function () {
  doSomethingElse();
}).then(finalHandler);

doSomething
|-----------------|
                  doSomethingElse(undefined)
                  |--------------------------------|
                  finalHandler(undefined)
                  |------------------|

第一个then没有返回值，所以默认是返回undefined；

其次doSomethingElse()是一个异步操作，所以finalHandler会在doSomething执行完之后（中间执行的一些时间可以直接忽略掉）开始。

代码3

doSomething().then(doSomethingElse())
  .then(finalHandler);

doSomething
|-----------------|
doSomethingElse(resultOfDoSomething)
|--------------------------------|
                  finalHandler(undefined)
                  |------------------|

因为then传递的参数是一个自执行的函数，所以doSomething和doSomethingElse相当于同步执行，then默认传递undefined，所以等doSomething执行完后，finalHandler会继续执行。

代码4

doSomething().then(doSomethingElse)
  .then(finalHandler);

因为doSomethingElse本身是一个function，then本身是接受function的，所以这个和代码1（只是在外面又包了一层function）是相同的。

doSomething
|-----------------|
                  doSomethingElse(undefined)
                  |------------------|
                                     finalHandler(resultOfDoSomethingElse)
                                     |------------------|

练习

练习1：

let a = Promise.reject('a').then(() => {
    console.log('a passed')
}).catch(() => {
    console.log('a failed')
});

Promise.reject('b').catch(() => {
    console.log('b failed');
}).then(() => {
    console.log('b passed');
});

正确答案:

b failed
a failed
b passed

原因：

如果认为描述的还不够清楚，可以参考这篇文章讲解

catch是其实就是then(null, function(){})，所以他也是一步一步串联着往后运行，并不会特殊的跳到后面；
涉及到了JavaScript的执行顺序问题：

（1）JavaScript分为宏任务和微任务（两者一般都为异步任务）；特殊的，主线程也属于宏任务。

微任务有 Promise, I/O 等等
宏任务有 setTimeout, setInterval 等等

其中，宏任务和微任务是交替进行的，先是第一波宏任务和第一波微任务，然后再是第二波宏任务和微任务 ··· ···（按顺序then往下走，就可以分为第N波任务）

let a = Promise.reject('a')

相当于

let a = new Promise((resolve, reject) => {
  reject('a');
})

所以这个属于主线程，立即执行。

所以代码中宏任务和微任务可以按照下面分类和执行

先拆分

let p1 = Promise.reject('a').then(() => {
    console.log('a passed')
});

p1.catch(() => {
    console.log('a failed')
});

let p2 = Promise.reject('b').catch(() => {
    console.log('b failed');
});

p2.then(() => {
    console.log('b passed');
});

然后排序

// 一级微任务
let p1 = Promise.reject('a').then(() => {
    console.log('a passed')
});
let p2 = Promise.reject('b').catch(() => {
    console.log('b failed');
});

// 二级微任务
p1.catch(() => {
    console.log('a failed')
});
p2.then(() => {
    console.log('b passed');
});

所以按照顺序打印，由于p1抛出异常，紧跟着的是then不运行，p2抛出异常，紧跟着的是catch，打印b failed；由于没有宏任务所以直接运行二级微任务，p1找到了catch所以输出a failed；p2由于catch正常运行，返回了一个新的promise并且没有抛出异常，所以接着往下走，打印b passed。

练习2：

setTimeout(function () {
  console.log(1);
}, 0)
new Promise(function (resolve) {
  console.log(2);
  for (var i = 0; i < 100; i++) {
    i == 99 && resolve();
  }
  console.log(3);
}).then(function () {
  console.log(4);
})
console.log(5);

正确答案:

原因：

其实我们在上一题解释过宏任务和微任务，这里我就直接拆分并且排序一下

// 主线程
const p1 = new Promise(function (resolve) {
  console.log(2);
  for (var i = 0; i < 100; i++) {
    i == 99 && resolve();
  }
  console.log(3);
});

console.log(5);

// 一级宏任务
setTimeout(function () {
  console.log(1);
}, 0)

// 一级微任务
p1.then(function () {
  console.log(4);
})

主线程 new Promise直接运行，打印2,3随后console打印5，由于主线程属于宏任务，所以接下来运行一级微任务打印4，最后运行一级宏任务，打印1。

练习3：

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

正确答案：

1
2

原因：

打印1的原因很简单，认为resolve了一个值为1，被下面的then接收到了，其次由于then返回的promise没有抛出错误，所以紧接着下面的catch没有运行，继续往下链式调用，打印了上一个then返回的值2。

练习4：

Promise.resolve(1)
.then( (x) => x + 1 )
.then( (x) => {throw new Error('My Error')})
.catch( () => 1)
.then( (x) => x + 1)
.then((x) => console.log(x))
.catch( (x) => console.log(error))

正确答案：

原因：

我们需要明确的是catch捕获错误了之后还是可以继续进行链式调用的。

这个题目的迷惑就是为什么then抛出了错误之后，没有被捕获到；原因是catch本身是可以捕获到的，可是在后面的catch没有处理错误，而是直接返回了1，所以后面就顺风顺水的走了两个then，打印了了一个2。

后面四个问题，如果你还是没有明白，可以参考文章: 后四个题解析

好啦，文章结束~欢迎大家指出错误！