对于每个承诺，是否可以使用axios.all和then（）？ [英] Is it possible to use axios.all with a then() for each promise?

问题描述

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

I have a React component that triggers an event to fetch data. This results in a dynamic number of stored proc calls to fetch data, and the data from each call is stored in a totally different location. Then I need to re-render once all of the data is received and available. I'm using promises with axios.

由于axios调用的数量是动态的，我正在构建一个数组并将其插入 axios。所有如下：

Since the number of axios calls is dynamic, I'm building an array and inserting it into axios.all as follows:

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请求都会返回添加到完全不同位置的对象的数据。由于我无法将它们全部放在一个中的正确位置，然后（我怎么知道哪个响应在哪个位置？），我尝试做这样的事情：

The problem is that each axios request returns data that gets added to an object in a totally different place. Since I have no way to put them all in the correct place in a single then (how would I know which response goes in which location?), I tried doing something like this:

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 */);

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

However, this doesn't work as I expected. The then after each get is executed, but not until well after the then attached to axios.all. Obviously this is a problem because my code tries to use the data before it has been saved to the object.

有没有办法单独使用然后调用每个 axios.get ，它将在相应的承诺解决后执行，然后有一个最终的然后只有在所有的Promise被解析后才会执行，现在使用数据来填充对象？

Is there a way to have a separate then call for each axios.get that will be executed after its corresponding promise is resolved, and then have a final then that will be executed only after all of the promises are resolved, to use the data now that the object has been populated?

推荐答案

好的，所以我找到了一种方法来做我需要的，而不是在每个<$ c上使用然后 $ C> GET 。由于传入 axios.get 的参数包含足够的信息来确定保存位置，并且因为我可以从响应中读取参数，所以我可以执行以下操作：

Okay, so I found a way to do what I needed without using using a then on each get. Since the params passed in to axios.get contain enough info to determine the save location, and since I can read the params back from the response, I can do something like the following:

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 */);

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

This ensures all the data is received and saved to the object before it is used.

这篇关于对于每个承诺，是否可以使用axios.all和then（）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！