У меня есть несколько API, которые возвращают данные одного типа, но из разных областей, но тип данных тот же, только значения разные, и я хочу сохранить их все в одном состоянии реакции.
Итак, у меня есть это состояние:
let [infoData1, setInfoData1] = useState({ infoData1: [] });
let [infoData2, setInfoData2] = useState({ infoData2: [] });
и вызовы axios:
function multipleApiCall() {
const headers = {
"X-Api-Key": "the-api-key-00",
};
axios.get(
"http:url-to-data/ID1",
{ headers }
)
.then((response) => {
setInfoData1(response.data);
return axios.get(
"http:url-to-data/ID2",
{ headers }
)
})
.then(response => {
setInfoData2(response.data);
})
}
и после этого я хочу использовать .map()
, чтобы перечислить результат, но поскольку у меня есть 2 состояния, я не могу их объединить. Итак, как я могу получить все данные из этих двух API только в одном состоянии или, может быть, в другом подходе?
const [infoData, setInfoData] = useState([]);
const headers = {
"X-Api-Key": "the-api-key-00",
};
const urls = ["http:url-to-data/ID1", "http:url-to-data/ID2"];
function multipleApiCall() {
const promises = urls.map(url => axios.get(url, { headers }));
Promise.all(promises).then(responses => {
let data = [];
responses.forEach(response => {
data = data.concat(response.data);
});
setInfoData(data);
});
}
Axios.get()
возвращает обещание. чтобы вы могли ждать всех обещаний и получать данные оттуда. дополнительная информация в этом принятом ответе: stackoverflow.com/a/52669775/13150902 Обратите внимание, что при использовании этого метода, если 1 запрос не выполняется,Promise.all()
не выполняется для обоих запросов.