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;
        })();
      }),
);

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

相关文章
|
1天前
|
JavaScript 前端开发
js教程——函数
js教程——函数
13 4
|
23小时前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
7 2
|
3天前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
14 5
|
3天前
|
JavaScript 前端开发
Node.js 函数
10月更文挑战第5天
10 3
|
6天前
|
前端开发 JavaScript
探索JavaScript函数基础
探索JavaScript函数基础
13 3
|
6天前
|
移动开发 JavaScript 前端开发
【JavaScript】JS执行机制--同步与异步
【JavaScript】JS执行机制--同步与异步
12 0
|
7天前
|
前端开发 数据可视化 开发者
D3.js 内置的动画函数
D3.js 内置的动画函数
|
21天前
|
Go 定位技术 索引
Go 语言Map(集合) | 19
Go 语言Map(集合) | 19
|
20天前
|
存储 前端开发 API
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
该文章详细介绍了ES6中Set和Map数据结构的特性和使用方法,并探讨了它们在前端开发中的具体应用,包括如何利用这些数据结构来解决常见的编程问题。
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
|
9天前
|
存储 分布式计算 Java
Stream很好,Map很酷,但答应我别用toMap():Java开发中的高效集合操作
在Java的世界里,Stream API和Map集合无疑是两大强大的工具,它们极大地简化了数据处理和集合操作的复杂度。然而,在享受这些便利的同时,我们也应当警惕一些潜在的陷阱,尤其是当Stream与Map结合使用时。本文将深入探讨Stream与Map的优雅用法,并特别指出在使用toMap()方法时需要注意的问题,旨在帮助大家在工作中更高效、更安全地使用这些技术。
21 0