目录
为什么需要用map执行异步
有时候我们可能要根据多个单一值进行异步的请求，也就是要发送同一类型的请求。
比如我有一个装一百个书本id的数组，我需要获得每个书本的详细内容，都是调用一个接口，只不过是入参id不同，总不能写一百个请求，这时候就可以使用了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]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635463/20241109/c55917b4a28342b78633c9da58d86e30.png?x-oss-process=image/resize,h_160,m_lfit)