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

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

相关文章
|
17天前
|
JavaScript 前端开发 安全
JavaScript函数详解
JavaScript函数的详细解析,包括函数的定义和调用方式(如一般格式、匿名函数、构造函数、自调用函数、箭头函数和严格模式)、函数参数(arguments对象、可变参数、默认参数值)、闭包的概念和应用实例。
JavaScript函数详解
|
2天前
|
前端开发 JavaScript
探索JavaScript函数基础
探索JavaScript函数基础
|
4天前
|
JavaScript 前端开发
在JS中如何声明一个函数
在JS中如何声明一个函数
11 2
|
16天前
|
JavaScript 前端开发
JavaScript函数可以返回两个值
JavaScript函数可以返回两个值
|
16天前
|
自然语言处理 分布式计算 JavaScript
JavaScript函数
JavaScript函数
|
17天前
|
存储 JavaScript 前端开发
js的map和set |21
js的map和set |21
|
15天前
|
数据处理 Python
Pandas中的map函数应用
Pandas中的map函数应用
13 2
|
17天前
|
JavaScript 前端开发
js map和reduce
js map和reduce
|
16天前
|
缓存 JavaScript 前端开发
了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化
该文章详细讲解了JavaScript中的作用域、闭包概念及其应用场景,并简要分析了函数柯里化的使用。
了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化
|
19天前
|
JavaScript 前端开发
js防抖函数返回值问题解决方案
本文介绍了如何在JavaScript中创建一个带有返回值的防抖函数,通过结合Promise来实现。这种防抖函数可以在事件触发一定时间后再执行函数,并能处理异步操作的返回值。文章提供了防抖函数的实现代码和如何在实际项目中使用该防抖函数的示例。
18 1