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

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

相关文章
|
13天前
|
JavaScript 前端开发 索引
问js的forEach和map的区别
JavaScript中的`forEach`和`map`都是数组迭代方法。`forEach`遍历数组但不修改原数组,无返回值;它接受回调函数处理元素。`map`则遍历数组并返回新数组,新数组元素为回调函数处理后的结果。两者都接收元素、索引和数组作为回调函数参数。
18 7
|
14天前
|
存储 JavaScript 前端开发
解释 JavaScript 中的作用域和作用域链的概念。
【4月更文挑战第4天】JavaScript作用域定义了变量和函数的可见范围,静态决定于编码时。每个函数作为对象拥有`scope`属性,关联运行期上下文集合。执行上下文在函数执行时创建,定义执行环境,每次调用函数都会生成独特上下文。作用域链是按层级组织的作用域集合,自内向外查找变量。变量查找遵循从当前执行上下文到全局上下文的顺序,若找不到则抛出异常。
20 6
|
14天前
|
JavaScript
变量和函数提升(js的问题)
变量和函数提升(js的问题)
|
14天前
|
JavaScript
常见函数的4种类型(js的问题)
常见函数的4种类型(js的问题)
10 0
|
15天前
|
JavaScript
写一个函数将N组<>(包含开始和结束),进行组合,并输出组合结果 (js)
写一个函数将N组<>(包含开始和结束),进行组合,并输出组合结果 (js)
9 0
|
24天前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它采用中间件系统增强功能,如日志和错误处理,集成多种模板引擎(EJS、Jade、Pug)用于HTML渲染,并提供安全中间件提升应用安全性。其可扩展性允许选用合适插件扩展功能,加速开发进程。
|
24天前
|
缓存 JavaScript 前端开发
js开发:请解释什么是Webpack,以及它在项目中的作用。
Webpack是开源的JavaScript模块打包器,用于前端项目构建,整合并优化JavaScript、CSS、图片等资源。它实现模块打包、代码分割以提升加载速度,同时进行资源优化和缓存。借助插件机制扩展功能,并支持热更新,加速开发流程。
17 4
|
25天前
|
缓存 JavaScript 数据安全/隐私保护
js开发:请解释什么是ES6的Proxy,以及它的用途。
`ES6`的`Proxy`对象用于创建一个代理,能拦截并自定义目标对象的访问和操作,应用于数据绑定、访问控制、函数调用的拦截与修改以及异步操作处理。
17 3
|
25天前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
21 2
|
1天前
|
缓存 JavaScript 前端开发
js的入口函数,入口函数的作用
js的入口函数,入口函数的作用
12 4