jsmap中使⽤async异步函数（含详细解释）
⽬录
为什么需要⽤map执⾏异步
有时候我们可能要根据多个单⼀值进⾏异步的请求，也就是要发送同⼀类型的请求。
⽐如我有⼀个装⼀百个书本id的数组，我需要获得每个书本的详细内容，都是调⽤⼀个接⼝，只不过是⼊参id不同，总不能写⼀百个请求，这时候就可以使⽤了map执⾏异步来做这件事。
当然也许多请求效率会很低，不过这不是今天的主题。
Promise.all
Promise.all是⼀个Promise的⽅法，如果不了解Promise可以先移步：。
了解了之后我们看它怎么⽤：
1. all这个⽅法⼊参传递⼀个promise数组。
2. Promise.all()它本⾝是⼀个Promise，也就是我们可以.then回调或者使⽤await接收。
3. ⽽接收的内容是⼀个数组，⾥⾯装着所有⼊参数组中的Promise的返回值，⼀⼀对应。
const res =await Promise.all([p1,p2,p3]);
console.log(res)// [res1,res2,res3]
与map结合
await和async使用方法我们知道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 ='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 ='xxxxx/xx?id='+ id;
const response =await fetch(url);
const res =await response.json();
return res;
})();
}),
);
⼤功告成！觉得有⽤的话点个赞再⾛吧~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。