JS异步编程之Promise详解，这才是你所需要的前端知识！

场景举例
某天，突发奇想，发了封邮件给木匠师傅，定制一个如此这般的家具。
木匠有求必应，即是说，邮件一旦发出就得到了他的承诺(Promise)：在下一定尽力。
邮件中规定好了结果的通知方式：
成功了，直接将家具(res)邮递(resolve)过来。
失败了，直接将失败的信息(err)发邮件(reject)过来。

请输入图片描述
邮件发出等价于得到木匠的承诺P，之后，能做的只有等待(then)。

请输入图片描述

行为特征
状态
每个Promise有三种状态：进行中(pending)、已成功(resolved)和已失败(rejected)。
创建即进入pending状态，在传入方法中一旦调用了resolve/reject方法，最终状态便变成resolved/rejected。
一旦变成结果状态，即更改成resolved/rejected，状态便被冷冻，不能再被更改。
1.状态容器
Promise实质是个状态容器。
得到结果状态后，任何时候都可以访问到此状态。
这与事件订阅通知不同，如果订阅发生在通知之后，订阅是不起作用的。
2.状态不可控
一旦创建Promise，便会立刻执行，无法取消。
处于pending状态时，无法得知进程具体的信息，比如完成百分比（虽然可以自行设置回调进行通知）。
3.失败的状态
成功的状态只能由resolve方法转成。
失败的状态可以由reject方法转成，也可以由抛出错误间接转成。
三者都会正常的打印出失败的信息。

请输入图片描述
4.错误的报告机制
如果失败状态没有接收失败的回调函数接收，Promise会抛出错误。
这里的抛出错误，仅仅是在控制台显示之类的提示，不会终止程序的进程。
先打印出 'err' ，再报错。

请输入图片描述
一旦Promise设置了失败回调函数，即便是代码执行错误，也会自行消化，不外报。
虽然 a 未被定义，但全程安静，无槽点。

请输入图片描述
执行顺序
1.传入方法
创建Promise的同时也会执行传入方法。
传入方法不会因为调用了resolve/reject便终止执行，所以更优的方式是retrun resolve/reject。

请输入图片描述
2.回调方法
立即得到结果的Promise，其回调函数依然会晚于本轮事件执行。
这种后执行不同于setTimeout的将执行函数push到执行栈，而是将执行函数放到本轮的末尾。

请输入图片描述
3.结果参数
传入reject的参数，一般是字符串或Error实例，表示抛出的错误。
传入resolve的参数，一般是相应的JSON数据等，表示得到的数据。
传入resolve的参数，还可以是另一个Promise实例。
这时，只有当内层的Promise结束后，外层的Promise才会结束。

请输入图片描述
在这种情况下，如果内层失败，并不等于传递Error实例给resolve不同。
前者是内层Promise抛出了错误将被外层捕获，后者仅仅是参数为一个Error实例。

请输入图片描述
实例方法
then()
该方法可传入两个，分别对应成功/失败时的回调函数。
该方法返回的是一个新的Promise对象，这也是可以使用链式（.then.then...）的原因。

输入图片描述
1.return
链式中，后者的状态取决于前者（成功/失败）的回调函数中返回（return）的结果。
如果没有返回，相当返回一个成功的状态，值为undefined。
如果返回为Promise对象，后者的状态由该对象的最终状态决定。
如果返回为非Promise对象的数据，相当返回一个成功的状态，值为此数据。
如果前者执行时抛出了错误，相当是返回一个失败的状态，值为此错误。

请输入图片描述
2.状态的传递
在链式中，如果前者的状态没有被后者捕获，会一直（像）冒泡到被捕获为止。
状态被捕获后便消失，这之后的的状态由当前then返回的状态决定，之后重复。
依次打印出：
2 res 2000
3 res 3000

请输入图片描述
catch()
用于指定发生错误时的回调函数，等价于：.then(null, callback)。
其表现与then一致，比如返回新的Promise，状态的继承和传递等等。
一般推荐使用catch而不是then的第二个方法接收错误。
因为catch可以捕获then自身的错误，也更接近同步的写法（try/catch）。

new Promise(() => {})

复制代码

.then(() => {

复制代码

...

复制代码

})

复制代码

.catch(() => {

复制代码

...

复制代码

});

复制代码

finally()

复制代码

用于Promise处理结束后的收尾工作。
传入其的回调函数不会接受任何参数，意味着没有办法知道Promise的结果。
这也正表明，finally里面的操作与状态无关，不依赖Promise的处理结果。
其本质和catch一样，也是then方法的变种。
不过其仅仅是状态的传递者，只会返回原状态，不会接收状态和创建新的状态。

p.finally(() => {

复制代码

// codes...

复制代码

});

复制代码

--- 等价于

复制代码

p.then(res => {

复制代码

// codes...

复制代码

return res; // 将原成功状态返回

复制代码

}, err => {

复制代码

// codes...

复制代码

throw err; // 将原失败状态返回

复制代码

});

复制代码

示例
在请求数据时，我们会显示加载图案，请求完成后无论结果都要隐藏此图案。
一般，一个完整的 Promise 的结构会如下。

showLoading = true;

复制代码

new Promise((resolve, reject) => {

复制代码

[/code][code]// 请求...

复制代码

[/code][code]})

复制代码

[/code][code].then(res => {

复制代码

[/code][code]// 成功处理...

复制代码

[/code][code]})

复制代码

[/code][code].catch(err => {

复制代码

[/code][code]// 失败处理...

复制代码

[/code][code]})

复制代码

[/code][code].finally(() => {

复制代码

[/code][code]// 重置一些状态...

复制代码

[/code][code]showLoading = false;

复制代码

[/code][code]});

复制代码

[/code][code]静态方法

复制代码

[/code][code]resolve()

复制代码

此方法直接返回一个状态为resolved，值为其参数的Promise。

复制代码

Promise.resolve(res);

复制代码

--- 等价于

复制代码

new Promise(resolve => resolve(res));

复制代码

reject()

复制代码

此方法直接返回一个状态为rejected，值为其参数的Promise。

复制代码

Promise.reject(res);

复制代码

--- 等价于

复制代码

new Promise((resolve, reject) => reject(res));

复制代码

all()

复制代码

此方法用于将多个Promise实例，包装成一个新的Promise实例。
其参数为一个数组，每一项应为Promise实例（不是则会使用Promise.resolve进行转化）。
新Promise的状态取决于传入数组中的每一项的最终状态。
如果有一项状态变成rejected，新实例则为rejected，值为该项的返回值。
如果全部项都变成了resolved，新实例则为resolved，值为包含每一项返回值的数组。
三秒后，打印出：[1, 2, 3]。

请输入图片描述
race()
此方法与all()基本相同，传入的参数也是一个Promise数组。
不同的是，新Promise的最终状态是由数组中第一个状态改变的项（成功或失败）决定的。
一秒后，打印出 1 。

请输入图片描述
非特殊说明，本文版权归原作者所有，转载请注明出处
本文地址：https://www.toutiao.com/i6604612750867956232/

觉得本文对你有帮助？请分享给更多人
关注「前端大全」，提升前端技能

点击下方“阅读原文”即可加入web前端HTML5学习群获取前端学习资料