时间戳

首页 > 解决方案 > 从动作中反应 .map() 函数内的异步 API 调用

javascript - 从动作中反应 .map() 函数内的异步 API 调用

问题描述

我是 React JS 的新手。在我的应用程序中，我面临需要使用不同的 url 多次调用 API 的情况，例如 apiurl.com/abc、apiurl.com/xyz。这些 abc 和 xyz 存储在一个数组中。因此，我想使用 .map() 更改 url 以进行多个 api 调用。但是在 .map() 中，异步等待是行不通的，所以如果有的话，请寻找一些解决方案。我已经经历了一些可能的解决方案，比如承诺，但无法实施。

这是我的代码：

export const someAction = () => async (dispatch, param) => {
let myArray = ["abc", "xyz"];
let id= "";
param1 = "someauthcode";
myArray.map((x) => {
    id = x;
    const myResponse = await loaders.myResponseApi(param1, id); *//This does not work as await should be in async call*
});
dispatch({ type: types.ARRAY_API, payload: myResponse });

}

所以想法是使用 apiurl.com/abc、apiurl.com/xyz 进行 2 次 api 调用。我在不同的文件中构建了 url (apiurl.com)。

提前致谢。

标签： javascriptreactjsreduxjsx

解决方案

将您的数组变成一组承诺，然后使用Promise.all

export const someAction = () => async(dispatch) => {


   try {
     const payload = await Promise.all(myArray.map(id => loaders.myResponseApi(param1,id)));
     dispatch({type:types.ARRAY_API,payload});
   } catch(err) {
     // an error occurred in at least one of the promises
   }

}

推荐阅读