本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

有时候我们可能要根据多个单一值进行异步的请求，也就是要发送同一类型的请求。

比如我有一个装一百个书本id的数组，我需要获得每个书本的详细内容，都是调用一个接口，只不过是入参id不同，总不能写一百个请求，这时候就可以使用了map执行异步来做这件事。

当然也许这样太多的请求效率会很低，我们可能需要后端进行对应的接口优化，不过这不是今天的主题。

本文介绍如何使用Promise.all让map同时进行多个异步请求。

Promise.all

Promise.all是一个Promise的方法，如果不了解Promise可以先移步：js Promise与async/await用法详解。

了解了之后我们看它怎么用：

all这个方法入参传递一个promise数组。

Promise.all()它本身是一个Promise，也就是我们可以.then回调或者使用await接收。

而接收的内容是一个数组，里面装着所有入参数组中的Promise的返回值，一一对应。

    const res = await Promise.all([p1,p2,p3]);
    console.log(res) // [res1,res2,res3]

与map结合

我们知道map本身可以改变自己的数组内容，因此我们可以把它中的每个内容都变成Promise，怎么变呢？

这里我们又用到了一个知识就是async异步函数的返回值就是Promise。

也就是res是promise。

  async ()=>{
    ...
    return res
  }

那怎么得到res呢？执行这个函数啊。

  const result = (async () => {
    ...
    return res;
  })();

执行完这个result就是Promise。

很好，单个的Promise你会创造了，那我们同理用map创造一个Promise数组。

结合上文你应该能很好理解：

      Books.map(id => {
        return (async () => {
          const url = 'http://xxxxx/xx?id=' + id;
          const response = await fetch(url);
          const res = await response.json();
          return res;
        })();
      }),

然后把它放入Promise.all。

const bookInfoArr = await Promise.all(
      Books.map(id => {
        return (async () => {
          const url = 'http://xxxxx/xx?id=' + id;
          const response = await fetch(url);
          const res = await response.json();
          return res;
        })();
      }),
);

大功告成！

尾言

如果觉得这篇文章对你有帮助的话，欢迎点赞收藏哦，有什么错误或者意见建议也可以留言，感谢~

js map中使用async异步函数（含详细解释）

前言

Promise.all

与map结合

尾言