javascript - js array.map() 的回调用async函数怎么写比较简单？

问题描述：

let items = [1, 2, 3];
items = items.map(async (v) => {
  await asyncMultiplyByTwo(v);
});

如果直接这样写，会得到一组Promise对象

必须这样写才能获取正确结果：

let items = [1, 2, 3];
items = await Promise.all(
  items.map(async (v) => {
    await asyncMultiplyByTwo(v);
  })
);

我服了，map()函数用async居然这么麻烦，有什么更好的写法，或者库来用？

第 1 个答案：

你说得对，但是

其实第二种写法，map 里面的函数不需要 async/await，反正都是返回 Promise

let items = [1, 2, 3];
items = await Promise.all(
  items.map((v) => {
    asyncMultiplyByTwo(v)
  })
);

不过，我推测你原先的写法还有别的问题，就是没有 return，而 asyncMultiplyByTwo 看起来是一个返回入参两倍的异步函数，它的返回值应该是需要的

const items = [1, 2, 3];
items = await Promise.all(
  items.map(async (v) => {
    return await asyncMultiplyByTwo(v)
  })
);

或者

items = await Promise.all(
  items.map((v) => {
    return asyncMultiplyByTwo(v))
  }
);

或者

items = await Promise.all(
  items.map((v) => asyncMultiplyByTwo(v))
);

那这么看来不需要箭头函数

items = await Promise.all(items.map(asyncMultiplyByTwo))

这么看来是不是没有那么复杂？

如果你还是不喜欢每次都写 Promise.all，大可以封装一下（不过不推荐扔到原型链上）

const mapAll = (array, fn) => Promise.all(array.map(fn))

用的时候

mapAll(items, asyncMultiplyByTwo)

第 2 个答案：

用for await of咯，(与promise.all执行方式不一致)

没其他更简洁的方式，或者你可以自己封装一下

function AwaitAllRequest<T extends any[]>(paramList: T, request: (...args) => Promise<unknown>) {
  return Promise.all(paramList.map(async (v) => await request(v)))
}

在学习 vuegithub 地址：nofaceimport { createApp } from 'vue'impo ...