多个await与await Promise.all的区别

1,577 阅读2分钟

前两天沸点有人问到,两者都可以进行错误处理啥的(一些一样的使用特性),那一个async函数中使用多个await去获取异步请求的结果与使用一个await搭配Promise.all的区别是什么呢?

首先先说awaitawait的作用其实就是方便我们在async函数中获取异步请求的结果(获取promise成功的原因,类似于对象解构),同时还有一个效果就是暂停async函数的执行,如果我们使用多个await就会导致阻塞异步请求发出,也就是下面的请求要等上面的请求被响应之后才发出(比如axios.get这种异步代码,响应是异步的,但这个代码的执行代表请求的发出,请求发出可以理解为同步代码),而Promise.all的作用就是可以让所有异步请求都顺利发出(all方法的实现就是for循环去触发异步逻辑),浏览器的请求线程就可以并行工作,从而提升效率。并且我们可以用await去解构Promise.all,从而方便的获取请求的结果。

需要明确的一点是,并不是说await阻塞了浏览器的请求多线程,请求多线程是浏览器的稳定存在的能力,对于我们开发者来说也是无感的,之所以连续的await阻塞请求导致严重影响项目效率,是因为await导致async函数中的逻辑执行被中断,await后面的请求没发出去,换句话说,同一时刻只有一个异步请求被发出。

关于await多说一句,await只是阻塞async函数内部的逻辑执行,并不会导致js引擎线程(主线程)的阻塞,async函数会把主线程让出来给同步代码。

现在想到公司项目中那几个连续的await,我就绷不住了,这是一个前端该写出来的代码么😂?