一文打通Promise的任督二脉

这个也是紧接着 Symbol、原型链的第三篇有关JavaScript基础的相关内容,这个也是比较重要的内容,我们这篇文章的主题将会紧紧围绕下面这幅图展开:
一文打通Promise的任督二脉_第1张图片
当然,如果想看完整的总结,请直接滑到文章的最后。

什么是Promise?

它其实就是一个构造函数,通过 new 这样的构造函数来创建一个promise实例,最后使用promise相关的API,让你的代码能够在未来的可预测的某个时刻去执行。

它解决了什么问题?

它提供了一种让代码异步运行的全新解决方案。

它有哪些特点?

  • promise实例3种状态,分别是pending(进行中)、fulfilled(已完成)、rejected(已失败)。
  • 一个promise实例的状态只能改变一次,且不能回滚。
  • promise暴露了一些API,支持你监听promise状态的改变。
  • 所有的Promise的API都会返回一个新的promise实例。
  • 当我们new Promise构造函数时,构造函数里的代码是立即执行的。

如何创建Promise实例?

在这里插入图片描述

如何进行错误处理?

处理promise相关的错误时,大致分为3类,分别如下:

一文打通Promise的任督二脉_第2张图片
这一块大家还是要了解它的明细的,因为我们使用promise,80%的场景下都是并发处理,错误处理不恰当,就会导致意想不到的bug发生。

Promise相关的API有哪些?

这一块的API较多,我大致列举了一下思维导图,如下:

一文打通Promise的任督二脉_第3张图片
我们重点看一下后面几个API,分别如下:

Promise.all

参数:由promise实例组成的数组。

数组里各项的执行顺序:并发执行。

返回:如果有一个实例失败,那么就返回失败的信息;如果全部都成功了,那么就会返回一个数组,数组里包含了每个promise实例成功的信息。

运行流程:
1、如果各promise实例的状态都是resolve,那么就会先执行各自实例的 then函数,然后再执行 Promise.all.then。
2、如果promise实例中,有一个状态被reject了,那么就会触发Promise.all.catch,其余还没执行完的promise实例将继续执行,只不过无论如何都不会再触发Promise.all.catch 或者 Promise.all.then了。

我们实际code一下:

let p1 = function(){
    return new Promise((resolve, reject) => {
        setTimeout(function(){
            resolve(1);        
        }, 1000);
    });
}

let p2 = function(){
    return new Promise((resolve, reject) => {
        setTimeout(function(){
            resolve(2);        
        }, 2000);
    }).then(res => {
        console.log('p2的then实例:', res);    
    });
}

Promise.all([p1(), p2()]).then(res => {
    console.log('最终收到的响应:', res);
})

上面的代码运行以后,我们的控制台会输出下面的信息:

/***
	p2的then实例: 2
	最终收到的响应: [ 1, undefined ]
*/

为什么数组第二项是一个undefined呢?最开始我们说过,promise里所有的API都会返回一个新的Promise实例,我们给p2注册的then方法里并没有明确返回值,所以输出是undefined,符合预期。

Promise.race

参数:由promise实例组成的数组。

数组里各项的执行顺序:并发执行。

返回:返回实例里状态改变最快的实例结果。

运行流程:
1、多个promise实例,看谁的状态最先发生改变,那么 promise.race.then 或者 promsie.race.catch 就返回 最快的resolve或者reject。
2、如果有没跑完的promise实例就接着跑,只是不会再触发 promise.race.then 或者 promise.race.catch。

我们来coding一下:

let p1 = function(){
    return new Promise((resolve, reject) => {
        setTimeout(function(){
            resolve(1);        
        }, 1000);
    });
}

let p2 = function(){
    return new Promise((resolve, reject) => {
        setTimeout(function(){
            resolve(2);        
        }, 2000);
    }).then(res => {
        console.log('p2的then实例:', res);
        return res;
    });
}

Promise.race([p1(), p2()]).then(res => {
    console.log('最终收到的响应:', res);
})

运行一下代码,结果如下:

/***
	最终收到的响应: 1
	p2的then实例: 2
*/

Promise.allSettled

参数:由promise实例组成的数组。

数组里各项的执行顺序:并发执行。

返回:将各实例的结果按顺序组成一个数组并返回。

运行流程:
1、会等待所有的promise实例状态都发生变化,才会去触发 Promise.allSettled.then。
2、返回的是一个结果数组。
每一项都包含status状态(fulfilled、rejected)字段来标识promise实例是resolve还是被reject。

我们再把这个coding一下:

let p1 = function(){
    return new Promise((resolve, reject) => {
        setTimeout(function(){
            resolve(1);        
        }, 1000);
    });
}

let p2 = function(){
    return new Promise((resolve, reject) => {
        setTimeout(function(){
            resolve(2);        
        }, 2000);
    }).then(res => {
        console.log('p2的then实例:', res);
        return res;
    });
}

Promise.allSettled([p1(), p2()]).then(res => {
    console.log('最终收到的响应:', res);
})

看下控制台的输出结果:

/***
	p2的then实例: 2
    最终收到的响应: [
      { status: 'fulfilled', value: 1 },
      { status: 'fulfilled', value: 2 }
    ]
*/

Promise.any

参数:promise实例组成的数组。

各实例的执行顺序:并发执行。

返回:哪个promise的实例状态最先被置为fulfilled,就返回它。

这个就不coding了,留给大家自己去实践吧。

Promise相关应用有哪些?

下面列举了一些比较常见的应用,如下:

一文打通Promise的任督二脉_第4张图片
我们来一个一个的攻克。

promise实现并发请求

这个主要考察了Promise.all、Promise.allSettled 的应用。当然在实际工作中,allSettled的使用频率较高,这里就不细说了。

promise实现红绿灯交替闪烁

相信大家都遇到过这样的题目:

1s红灯,下一秒绿灯,下一秒黄灯,再下一秒红灯,如此往复...

这种重复执行的内容,采用递归一定是不行的。因为每次调用一个函数,都会为它创建执行上下文并压入栈中,栈的容量是有限的,因为这道题不存在pop场景,所以使用递归,一定会爆栈。

定时器setInterval + 全局变量就是一个很好的实现手段,但是不知道为啥,这种题目会跟promise关联上,想不懂。

我写文章有时候确实是这样,我只写我认为有意义的东西,但是我又来者不拒,所以大家可以把这道题的意义写在评论区里,没准看到评论,我的思路被打开了,才会去重视这道题。

如何实现promise.all

想要实现这个内容,首先我们要想想这个API的特点以及实现的难点:

  • 返回一个promise实例
  • 数组里各项都是并发进行。
  • 返回最先失败的那个实例,如果都成功,就将各实例的结果 拼成数组 并返回。
  • 难点:如何监测promise实例发生了改变?这个点我们可以直接在各promise实例后面再添加 then方法 and catch方法来解决。

有了上述的分析,我们就可以实现all这个API:

let customAll = (instanceArr) => {
    let failReason = null;
    let result = [];
    return new Promise((fulfilled, rejected) => {
        instanceArr.forEach(item => {
            item.then(succcess => {
                result.push(succcess);
                if (result.length === instanceArr.length){
                    // 说明全部都执行成功啦,直接返回
                    return fulfilled(result);
                }
            })
            .catch(err => {
                if (failReason === null){
                    // 返回第一个失败的实例
                    failReason = err;
                    return rejected(failReason);
                }
            })
        });
    });
}

如何实现promise.allSettled

这个的实现思路跟all差不多,主要修改2个点:

  • 修改返回信息。all是直接将最后的结果(value)返回给用户,而allSettled还需要将状态(status)返回给用户。
  • catch方法里不能直接reject了,因为这个allSettled方法总是会在最外面包裹一层fulfilled并返回给用户。

有了上面的分析,不难写出这个方法的实现:

let customAllSettled = (instanceArr) => {
    let failReason = null;
    let result = [];
    return new Promise((fulfilled, rejected) => {
        instanceArr.forEach(item => {
            item.then(succcess => {
                result.push({
                    status: 'fulfilled',
                    value: succcess
                });
                if (result.length === instanceArr.length){
                    // 说明全部都执行成功啦,直接返回
                    return fulfilled(result);
                }
            }).catch(err => {
                result.push({
                    status: 'rejected',
                    value: err
                });
                if (result.length === instanceArr.length){
                    fulfilled(result);
                }
            });
        });
    });
}

如何实现promise.race

这个API的实现思路跟之前的都差不错,它是赛马机制,所以我们需要一个全局变量,这个全局变量用来判定谁的状态是第一个发生改变的。

let customRace = (instanceArr) => {
    let isFirst = null;
    return new Promise((fulfilled, rejected) => {
        instanceArr.forEach(item => {
            item.then(succcess => {
                if (isFirst === null){
                    isFirst = true;
                    return fulfilled(succcess);
                }
            }).catch(err => {
                if (isFirst === null){
                    isFirst = true;
                    return rejected(err);
                }
            });
        });
    });
}

最后

又到了该说再见的时候了,希望这篇文章的讲解可以对你有帮助,噢对了,我最近搭建了一个交流群,里面可以自由探讨技术,如果你感兴趣,欢迎添加我的微信:18845097791,我拉你入群。那么我们下期再见啦,拜拜~~

一文打通Promise的任督二脉_第5张图片

你可能感兴趣的:(javascript,前端,promise)