js map中使用async异步函数(含详细解释)

简介: js map中使用async异步函数(含详细解释)

目录


为什么需要用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;
        })();
      }),
);

大功告成!觉得有用的话点个赞再走吧~

相关文章
|
4月前
|
前端开发 JavaScript
JavaScript中的Async/Await:简化异步编程
JavaScript中的Async/Await:简化异步编程
369 109
|
4月前
|
前端开发 JavaScript API
JavaScript异步编程:从Promise到async/await
JavaScript异步编程:从Promise到async/await
480 204
|
5月前
|
前端开发 JavaScript
JavaScript异步编程:从回调地狱到Async/Await
JavaScript异步编程:从回调地狱到Async/Await
|
5月前
|
前端开发 JavaScript
JavaScript异步编程:从回调地狱到Async/Await优雅进化
JavaScript异步编程:从回调地狱到Async/Await优雅进化
|
5月前
|
前端开发 JavaScript
JavaScript异步编程:从Callback到Async/Await的进化
JavaScript异步编程:从Callback到Async/Await的进化
|
6月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
270 19
|
8月前
|
JavaScript
JS实现多条件搜索函数
JS封装的多条件搜索

热门文章

最新文章