如何以与调用函数的循环方式相同的顺序从 API 返回 res？

问题描述

我有一个根据用户输入更新的数组。

someArray = [a,b,c]

我想在遍历数组时获取 API

const arrayIWant = []
for ( var i=0; i<someArray.length; i++) {
    const arrayToString = []
    arrayToString.push(encodeURIComponent(someArray[i]))
    axios.get(`http://someURL&element=${arrayToString})
    .then(res => {
    arrayIWant.push(res.element)
})
}

它应该返回

arrayIwant = [d,e,f]

哪里

d,f returned from a,c respectively. 

然而，我发现每次通过按钮调用获取请求时，获取请求中 d、e、f 元素的顺序是完全随机的。我做错了什么？请帮忙。 提前致谢。

解决方法

您可以使用 Promise.all() 等待所有 promise 解析并返回一个按您需要排序的数组。

async function someFunc() {
  const callPromises = someArray.map((element) => {
    const arrayToString = [encodeURIComponent(element)];
    return axios.get(`http://someURL&element=${arrayToString}`);
  });

  return (await Promise.all(callPromises)).map((res) => res.element);
}

const arrayIWant = someFunc();

如果您不想使用 async/await，您可以执行以下操作

var arrayIWant = [];

const callPromises = someArray.map((element) => {
  const arrayToString = [encodeURIComponent(element)];
  return axios.get(`http://someURL&element=${arrayToString}`);
});

Promise.all(callPromises).then((responses) => {
  arrayIWant = responses.map((res) => res.element);
});