关于js中异步函数平行调用的小问题(async/await)

479 阅读1分钟

关于js中异步函数平行调用的小问题

最近在学习async和await关键字的时候遇到了一个小小的不容易理解的地方

直接看代码

 function fun(v, timeout) {
     return new Promise(resolve => {
         setTimeout(resolve, timeout * 1000, v);
     });
 }
 ​
 async function run() {
     let v1 = await fun("fun1", 2);
     console.log(v1);
     let v2 = await fun("fun2", 2);
     console.log(v2);
 }
 ​
 run(); // 总共需要4s

当我这样去调用的时候,是串行调用

但当我想要平行调用时

 function fun(v, timeout) {
     return new Promise(resolve => {
         setTimeout(resolve, timeout * 1000, v);
     });
 }
 ​
 async function run() {
     let v1 = await fun("fun1", 2);
     let v2 = await fun("fun2", 2);
     console.log(v1);
     console.log(v2);
 }
 ​
 run(); // 总共需要4s

这样竟然也需要4s,这就让我有点疑惑

然后我看视频后,我发现

 function fun(v, timeout) {
     return new Promise(resolve => {
         setTimeout(resolve, timeout * 1000, v);
     });
 }
 ​
 var p1 = fun("fun1", 2);
 var p2 = fun("fun2", 2);
 ​
 async function run() {
     let v1 = await p1;
     let v2 = await p2;
     console.log(v1);
     console.log(v2);
 }
 ​
 run(); // 总共需要2s

当我们直接等待两个Promise对象而不是函数的返回值时,它们可以同时等待

这到底有什么区别呢?

原来,当我们直接等待两个Promise对象时,这两个Promise已经开始执行,如果等待函数执行来返回Promise的话就相当于这样

 async function run() {
     let v1 = await fun("fun1", 2);
     let p2 = fun("fun2", 2); // 首先需要执行函数获取Promise对象
     let v2 = await p2;
     console.log(v1);
     console.log(v2);
 }

而我们又知道,await后面的代码需要等待await拿到值后才执行,也就是第一个await获取到值后,第二个Promise才开始初始化,紧接着才开始被第二个await等待。

本人只是一个刚开始正式学习js的快大二的萌新,如果有错误的地方欢迎指正

哈哈哈[呲牙]