对于每个承诺,是否可以使用axios.all和then()？

Question

我有一个React组件触发一个事件来获取数据.这导致动态数量的存储过程调用以获取数据,并且来自每个调用的数据存储在完全不同的位置.然后,一旦收到所有数据并且可用,我需要重新渲染.我正在使用带有axios的承诺.

由于axios调用的数量是动态的,我正在构建一个数组并将其插入axios.all如下:

let promises = [];

for (let i = 0; i < requests.length; i++) {
    promises.push(axios.get(request[i].url, { params: {...} }));
}

axios.all(promises).then(/* use the data */);

问题是每个axios请求都会返回添加到完全不同位置的对象的数据.由于我无法将它们全部放在一个正确的位置then(我怎么知道哪个响应在哪个位置？),我尝试做这样的事情:

let promises = [];

for (let i = 0; i < requests.length; i++) {
    promises.push(
        axios.get(request[i].url, { params: {...} })
            .then(response => {myObject[request[i].saveLocation] = response.data;})
    );
}

axios.all(promises).then(/* use the data */);

但是,这并不像我预期的那样有效.在then每次使用后get执行,但直到好后then附着axios.all.显然这是一个问题,因为我的代码在将数据保存到对象之前尝试使用它.

有没有办法then对每个axios.get将在其相应的promise解析后执行的单独调用,然后有一个then只在所有 promise被解析后才会执行的final ,现在使用该对象的数据填充？

Answer 1

好的,所以我找到了一种方法来做我需要的而不使用thenon each get.由于params传入axios.get包含足够的信息来确定保存位置,并且因为我可以从响应中读取params,所以我可以执行以下操作:

let promises = [];

for (let i = 0; i < requests.length; i++) {
    promises.push(axios.get(request[i].url, { params: {...} }));
}

axios.all(promises)
    .then(axios.spread((...args) => {
        for (let i = 0; i < args.length; i++) {
            myObject[args[i].config.params.saveLocation] = args[i].data;
        }
    }))
    .then(/* use the data */);

这可确保在使用之前接收所有数据并将其保存到对象.