Promise用法回顾

首先来回顾一下Promise是什么。

Promise 是异步编程的一种解决方案，比传统的解决方案回调函数和事件更合理和更强大。

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

（1）Promise的实例有三个状态:

Pending（进行中）
Resolved（已完成）
Rejected（已拒绝）
当把一件事情交给promise时，它的状态就是Pending，任务完成了状态就变成了Resolved、没有完成失败了就变成了Rejected。

（2）Promise的实例有两个过程：

pending -> fulfilled : Resolved（已完成）
pending -> rejected：Rejected（已拒绝）
需要注意：一旦从进行状态变成为其他状态就永远不能更改状态了。

特点：

将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。流程更加清晰，代码更加优雅。
Promise对象提供统一的接口，使得控制异步操作更加容易。

缺点：

无法取消Promise，一旦新建它就会立即执行，无法中途取消。
如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

实例：

当我们在构造 Promise 的时候，构造函数内部的代码是立即执行的：

new Promise((resolve, reject) => {console.log('new Promise')resolve('success')
})
console.log('finifsh')
// new Promise -> finifsh

Promise 实现了链式调用，也就是说每次调用 then 之后返回的都是一个 Promise，并且是一个全新的 Promise，原因也是因为状态不可变。如果你在 then 中使用了 return，那么 return 的值会被 Promise.resolve() 包装

Promise.resolve(1).then(res => {console.log(res) // => 1return 2 // 包装成 Promise.resolve(2)}).then(res => {console.log(res) // => 2})

当然了，Promise 也很好地解决了回调地狱的问题，可以把之前的回调地狱例子改写为如下代码：

ajax(url).then(res => {console.log(res)return ajax(url1)}).then(res => {console.log(res)return ajax(url2)}).then(res => console.log(res))

前面都是在讲述 Promise 的一些优点和特点，其实它也是存在一些缺点的，比如无法取消 Promise，错误需要通过回调函数捕获。

Promise基础

1、下面代码的执行结果是

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

最后应该输出1 2 4。这样最主要的就是3，要知道promise.then是微任务，会在所有的宏任务执行完之后才会执行，同时需要promise内部的状态发生变化，因为这里内部没有发生变化，所以不输出3。

2、下面代码的执行结果是

const promise1 = new Promise((resolve, reject) => {console.log('promise1')resolve('resolve1')
})
const promise2 = promise1.then(res => {console.log(res)
})
console.log('1', promise1);
console.log('2', promise2);

输出结果如下：

'promise1'
'1' Promise{<resolved>: 'resolve1'}
'2' Promise{<pending>}
'resolve1'

需要注意的是，直接打印promise1，会打印出它的状态值和参数。

这里说一下这道题的具体思路：

. script是一个宏任务，按照顺序执行这些代码首先进入Promise，执行该构造函数中的代码，打印promise1
碰到resolve函数, 将promise1的状态改变为resolved, 并将结果保存下来
碰到promise1.then这个微任务，将它放入微任务队列 promise2是一个新的状态为pending的Promise
执行同步代码1，同时打印出promise1的状态是resolved 执行同步代码2，同时打印出promise2的状态是pending
宏任务执行完毕，查找微任务队列，发现promise1.then这个微任务且状态为resolved，执行它。

这样，就执行完了所有的的代码。

3、下面代码的执行结果是

const promise = new Promise((resolve, reject) => {console.log(1);setTimeout(() => {console.log("timerStart");resolve("success");console.log("timerEnd");}, 0);console.log(2);
});
promise.then((res) => {console.log(res);
});
console.log(4);

首先遇到Promise构造函数，会先执行里面的内容，打印1
遇到steTimeout，它是一个宏任务，被推入宏任务队列
接下继续执行，打印出2
由于Promise的状态此时还是pending，所以promise.then先不执行
继续执行下面的同步任务，打印出4
微任务队列此时没有任务，继续执行下一轮宏任务，执行steTimeout
首先执行timerStart，然后遇到了resolve，将promise的状态改为resolved且保存结果并将之前的promise.then推入微任务队列，再执行timerEnd
执行完这个宏任务，就去执行微任务promise.then，打印出resolve的结果

4、下面代码的执行结果是

Promise.resolve().then(() => {console.log('promise1');const timer2 = setTimeout(() => {console.log('timer2')}, 0)
});
const timer1 = setTimeout(() => {console.log('timer1')Promise.resolve().then(() => {console.log('promise2')})
}, 0)
console.log('start');

这个题目就有点绕了，下面来梳理一下：

首先，Promise.resolve().then是一个微任务，加入微任务队列
执行timer1，它是一个宏任务，加入宏任务队列
继续执行下面的同步代码，打印出start
这样第一轮的宏任务就执行完了，开始执行微任务，打印出promise1
遇到timer2，它是一个宏任务，将其加入宏任务队列
这样第一轮的微任务就执行完了，开始执行第二轮宏任务，指执行定时器timer1,打印timer1
遇到Promise，它是一个微任务，加入微任务队列
开始执行微任务队列中的任务，打印promise2
最后执行宏任务timer2定时器，打印出timer2

这个题目还是比较复杂的，值得去认真理解一下。

执行结果：

'start'
'promise1'
'timer1'`在这里插入代码片`
'promise2'
'timer2'

5、下面代码的执行结果是

const promise = new Promise((resolve, reject) => {resolve('success1');reject('error');resolve('success2');
});
promise.then((res) => {console.log('then:', res);
}).catch((err) => {console.log('catch:', err);
})

执行结果为：then：success1

这个题目考察的就是Promise的状态在发生变化之后，就不会再发生变化。开始状态由pending变为resolve，说明已经变为已完成状态，下面的两个状态的就不会再执行，同时下面的catch也不会捕获到错误。

6、下面代码的执行结果是

Promise.resolve(1).then(2).then(Promise.resolve(3)).then(console.log)

执行结果为：

1
Promise {<fulfilled>: undefined}

Promise.resolve方法的参数如果是一个原始值，或者是一个不具有then方法的对象，则Promise.resolve方法返回一个新的Promise对象，状态为resolved，Promise.resolve方法的参数，会同时传给回调函数。

then方法接受的参数是函数，而如果传递的并非是一个函数，它实际上会将其解释为then(null)，这就会导致前一个Promise的结果会传递下面。

7、下面代码的执行结果是

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)

输出的结果如下：

promise1 Promise {<pending>}
promise2 Promise {<pending>}Uncaught (in promise) Error: error!!!
promise1 Promise {<fulfilled>: "success"}
promise2 Promise {<rejected>: Error: error!!}

这个就比较好理解了，和上面的几个题目思路类似。

Promise的catch、then、finally

8、下面代码的执行结果是

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

输出结果为：1 2

Promise可以链式调用，因为每次调用 .then 或者 .catch 都会返回一个新的 promise，从而实现了链式调用, 它并不像一般我们任务的链式调用一样return this。

上面的输出结果之所以依次打印出1和2，是因为resolve(1)之后走的是第一个then方法，并没有走catch里，所以第二个then中的res得到的实际上是第一个then的返回值。并且return 2会被包装成resolve(2)，被最后的then打印输出2。

9、下面代码的执行结果是

Promise.resolve().then(() => {return new Error('error!!!')
}).then(res => {console.log("then: ", res)
}).catch(err => {console.log("catch: ", err)
})

返回任意一个非 promise 的值都会被包裹成 promise 对象，因此这里的return new Error(‘error!!!’)也被包裹成了return Promise.resolve(new Error(‘error!!!’))。

因此它被then捕获而不是catch，输出结果为：

"then: " "Error: error!!!"

10、下面代码的执行结果是

const promise = Promise.resolve().then(() => {return promise;
})
promise.catch(console.err)

这里其实是一个坑，.then 或 .catch 返回的值不能是 promise 本身，否则会造成死循环。所以这道题会报错：

Uncaught (in promise) TypeError: Chaining cycle detected for promise #<Promise>

11、下面代码的执行结果是

Promise.resolve(1).then(2).then(Promise.resolve(3)).then(console.log)

看到这个题目，好多的then，实际上我们只需要记住一个原则：.then 或.catch 的参数期望是函数，传入非函数则会发生值透传。

第一个then和第二个then中传入的都不是函数，一个是数字，一个是对象，因此发生了透传，将resolve(1) 的值直接传到最后一个then里。

所以输出结果为：1

12、下面代码的执行结果是

Promise.reject('err!!!').then((res) => {console.log('success', res)}, (err) => {console.log('error', err)}).catch(err => {console.log('catch', err)})

.then函数中的两个参数：

第一个参数是用来处理Promise成功的函数
第二个则是处理失败的函数

也就是说Promise.resolve(‘1’)的值会进入成功的函数，Promise.reject(‘2’)的值会进入失败的函数。

在这道题中，错误直接被then的第二个参数捕获了，所以就不会被catch捕获了，输出结果为：‘error’ ‘error!!!’

但是，如果是像下面这样：

Promise.resolve().then(function success (res) {throw new Error('error!!!')}, function fail1 (err) {console.log('fail1', err)}).catch(function fail2 (err) {console.log('fail2', err)})

在then的第一参数中抛出了错误，那么他就不会被第二个参数不活了，而是被后面的catch捕获到，所以输出结果为：

fail2 Error: error!!!at success

13、下面代码的执行结果是

Promise.resolve('1').then(res => {console.log(res)}).finally(() => {console.log('finally')})
Promise.resolve('2').finally(() => {console.log('finally2')return '我是finally2返回的值'}).then(res => {console.log('finally2后面的then函数', res)})

**finally()**一般用的很少，只要记住以下几点就可以了：

.finally()方法不管Promise对象最后的状态如何都会执行
.finally()方法的回调函数不接受任何的参数，也就是说你在.finally()函数中是无法知道Promise最终的状态是resolved还是rejected的
它最终返回的默认会是一个上一次的Promise对象值，不过如果抛出的是一个异常则返回异常的Promise对象。
finally本质上是then方法的特例

上面的代码的输出结果为：

1
finally2
finally
finally2后面的then函数 2

再开看一下.finally()的错误捕获：

Promise.resolve('1').finally(() => {console.log('finally1')throw new Error('我是finally中抛出的异常')}).then(res => {console.log('finally后面的then函数', res)}).catch(err => {console.log('捕获错误', err)})

输出结果为：

'finally1'
'捕获错误' Error: 我是finally中抛出的异常

Promise的all和race

.all()的作用是接收一组异步任务，然后并行执行异步任务，并且在所有异步操作执行完后才执行回调。

.race()的作用是接收一组异步任务，然后并行执行异步任务，只保留取第一个执行完成的异步操作的结果，其他的方法仍在执行，不过执行结果会被抛弃。

14、下面代码的执行结果是

function runAsync (x) {const p = new Promise(r => setTimeout(() => r(x, console.log(x)), 1000))return p
}Promise.all([runAsync(1), runAsync(2), runAsync(3)]).then(res => console.log(res))

首先，我们定义了一个Promise，来异步执行函数runAsync，该函数传入一个值x，然后间隔一秒后打印出这个x。

之后再使用Promise.all来执行这个函数，结果如下：

1
2
3
[1, 2, 3]

执行的时候，看到一秒之后输出了1，2，3，同时输出了数组[1, 2, 3]，三个函数是同步执行的，并且在一个回调函数中返回了所有的结果。并且结果和函数的执行顺序是一致的。

15、下面代码的执行结果是

function runAsync (x) {const p = new Promise(r => setTimeout(() => r(x, console.log(x)), 1000))return p
}
function runReject (x) {const p = new Promise((res, rej) => setTimeout(() => rej(`Error: ${x}`, console.log(x)), 1000 * x))return p
}
Promise.all([runAsync(1), runReject(4), runAsync(3), runReject(2)]).then(res => console.log(res)).catch(err => console.log(err))

输出结果：

// 1s后输出
1
3
// 2s后输出
2
Error: 2
// 4s后输出
4

我们可以看到。catch捕获到了第一个错误，在这道题目中最先的错误就是runReject(2)的结果。

如果一组异步操作中有一个异常都不会进入.then()的第一个回调函数参数中。会被.then()的第二个回调函数捕获。

16、下面代码的执行结果是

下面再来看一下race：

function runAsync (x) {const p = new Promise(r => setTimeout(() => r(x, console.log(x)), 1000))return p
}
Promise.race([runAsync(1), runAsync(2), runAsync(3)]).then(res => console.log('result: ', res)).catch(err => console.log(err))

执行结果：

1
'result: ' 1
2
3

then只会捕获第一个成功的方法，其他的函数虽然还会继续执行，但是不是被then捕获了。

17、下面代码的执行结果是

function runAsync(x) {const p = new Promise(r =>setTimeout(() => r(x, console.log(x)), 1000));return p;
}
function runReject(x) {const p = new Promise((res, rej) =>setTimeout(() => rej(`Error: ${x}`, console.log(x)), 1000 * x));return p;
}
Promise.race([runReject(0), runAsync(1), runAsync(2), runAsync(3)]).then(res => console.log("result: ", res)).catch(err => console.log(err));

输出结果为：

0
Error: 0
1
2
3

可以看到在catch捕获到第一个错误之后，后面的代码还不执行，不过不会再被捕获了。

注意：all和race传入的数组中如果有会抛出异常的异步任务，那么只有最先抛出的错误会被捕获，并且是被then的第二个参数或者后面的catch捕获；但并不会影响数组中其它的异步任务的执行。

Async、await

说到Promise就不得不提以下async和await，他们同样是用来执行异步代码。

18、下面代码的执行结果是

async function async1() {console.log("async1 start");await async2();console.log("async1 end");
}
async function async2() {console.log("async2");
}
async1();
console.log('start')

输出结果为：

async1 start
async2
start
async1 end

首先执行函数中的同步代码async1 start，之后碰到了await，它会阻塞async1后面代码的执行，因此会先去执行async2中的同步代码
async2，然后跳出async1
跳出async1函数后，执行同步代码start
. 在一轮宏任务全部执行完之后，再来执行await后面的内容async1 end

这里可以理解为await后面的语句相当于放到了new Promise中，下一行及之后的语句相当于放在Promise.then中。

19、下面代码的执行结果是

async function async1() {console.log("async1 start");await async2();console.log("async1 end");setTimeout(() => {console.log('timer1')}, 0)
}
async function async2() {setTimeout(() => {console.log('timer2')}, 0)console.log("async2");
}
async1();
setTimeout(() => {console.log('timer3')
}, 0)
console.log("start")

输出结果为：

async1 start
async2
start
async1 end
timer2
timer3
timer1

这个题目就稍微就有点麻烦了。看一下执行的步骤：

首先进入async1，打印出async1 start，这个是毋庸置疑的
之后遇到async2，进入async2，遇到定时器timer2，加入宏任务队列，之后打印async2
由于async2阻塞了后面代码的执行，所以执行后面的定时器timer3，将其加入宏任务队列，之后打印start
然后执行async2后面的代码，打印出async1 end，遇到定时器timer1，将其加入宏任务队列
最后，宏任务队列有三个任务，先后顺序为timer2，timer3，timer1，没有微任务，所以直接所有的宏任务按照先进先出的原则执行

实际上也不是很难，只要理清事件循环机制，就很容易做出来啦！

20、下面代码的执行结果是

async function async1 () {console.log('async1 start');await new Promise(resolve => {console.log('promise1')})console.log('async1 success');return 'async1 end'
}
console.log('srcipt start')
async1().then(res => console.log(res))
console.log('srcipt end')

输出结果：

script start
async1 start
promise1
script end

这里需要注意的是在async1中await后面的Promise是没有返回值的，也就是它的状态始终是pending状态，所以在await之后的内容是不会执行的，也包括async1后面的 .then。

21、下面代码的执行结果是

async function async1 () {console.log('async1 start');await new Promise(resolve => {console.log('promise1')resolve('promise1 resolve')}).then(res => console.log(res))console.log('async1 success');return 'async1 end'
}
console.log('srcipt start')
async1().then(res => console.log(res))
console.log('srcipt end')

这里对上面一题进行了改造，加上了resolve，来看看输出结果：

script start
async1 start
promise1
script end
promise1 resolve
async1 success
async1 end

这个就不难理解了，不多解释。

22、下面代码的执行结果是

来看一道字节跳动面试题：

async function async1() {console.log("async1 start");await async2();console.log("async1 end");
}async function async2() {console.log("async2");
}console.log("script start");setTimeout(function() {console.log("setTimeout");
}, 0);async1();new Promise(function(resolve) {console.log("promise1");resolve();
}).then(function() {console.log("promise2");
});
console.log('script end')

输出结果：

script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout

23、下面代码的执行结果是

async function async1 () {await async2();console.log('async1');return 'async1 success'
}
async function async2 () {return new Promise((resolve, reject) => {console.log('async2')reject('error')})
}
async1().then(res => console.log(res))

输出结果为：

async2
Uncaught (in promise) error

我们可以看到，如果async函数中抛出了错误，就会终止错误结果，不会继续向下执行。

如果想要让错误不足之处后面的代码执行，可以使用catch来捕获：

async function async1 () {await Promise.reject('error!!!').catch(e => console.log(e))console.log('async1');return Promise.resolve('async1 success')
}
async1().then(res => console.log(res))
console.log('script start')

这样的输出结果就是：

script start
error!!!
async1
async1 success

其他题目

24、下面代码的执行结果是

const first = () => (new Promise((resolve, reject) => {console.log(3);let p = new Promise((resolve, reject) => {console.log(7);setTimeout(() => {console.log(5);resolve(6);console.log(p)}, 0)1. List itemresolve(1);});resolve(2);p.then((arg) => {console.log(arg);});
}));
first().then((arg) => {console.log(arg);
});
console.log(4);

这是一道比较综合的题目，看一下执行结果：

3
7
4
1
2
5
Promise{<resolved>: 1}

说一下执行的步骤吧：

首先会进入Promise，打印出3，之后进入下面的Promise，打印出7
遇到了定时器，将其加入宏任务队列
执行Promise p中的resolve，状态变为resolved，返回值为1
执行Promise first中的resolve，状态变为resolved，返回值为2
遇到p.then，将其加入微任务队列，遇到first().then，将其加入任务队列
执行外面的代码，打印出4
这样第一轮宏任务就执行完了，开始执行微任务队列中的任务，先后打印出1和2
这样微任务就执行完了，开始执行下一轮宏任务，宏任务队列中有一个定时器，执行它，打印出5，由于执行已经变为resolved状态，所以
resolve(6)不会再执行
最后console.log§打印出Promise{: 1}

25、下面代码的执行结果是

const async1 = async () => {console.log('async1');setTimeout(() => {console.log('timer1')}, 2000)await new Promise(resolve => {console.log('promise1')})console.log('async1 end')return 'async1 success'
}
console.log('script start');
async1().then(res => console.log(res));
console.log('script end');
Promise.resolve(1).then(2).then(Promise.resolve(3)).catch(4).then(res => console.log(res))
setTimeout(() => {console.log('timer2')
}, 1000)

输出结果为：

script start
async1
promise1
script end
1
timer2
timer1

这道题比较简单，简单说一下执行的过程：

首先执行同步带吗，打印出script start
遇到定时器timer1将其加入宏任务队列
之后是执行Promise，打印出promise1，由于Promise没有返回值，所以后面的代码不会执行
然后执行同步代码，打印出script end
继续执行下面的Promise，.then和.catch期望参数是一个函数，这里传入的是一个数字，因此就会发生值渗透，将resolve(1)的值传到最后一
个then，直接打印出1
遇到第二个定时器，将其加入到微任务队列，执行微任务队列，按顺序依次执行两个定时器，但是由于定时器时间的原因，会在两秒后先打
印出timer2，在四秒后打印出timer1

26、下面代码的执行结果是

const p1 = new Promise((resolve) => {setTimeout(() => {resolve('resolve3');console.log('timer1')}, 0)resolve('resovle1');resolve('resolve2');
}).then(res => {console.log(res)  // resolve1setTimeout(() => {console.log(p1)}, 1000)
}).finally(res => {console.log('finally', res)
})

执行结果为：

resolve1
finally  undefined
timer1
Promise{<resolved>: undefined}

需要注意的是最后一个定时器打印出的p1其实是.finally的返回值，我们知道.finally的返回值如果在没有抛出错误的情况下默认会是上一个Promise的返回值，而这道题中.finally上一个Promise是.then()，但是这个.then()并没有返回值，所以p1打印出来的Promise的值会是undefined，如果在定时器的下面加上一个return 1，则值就会变成1。