Как вызвать api параллельно в реакции, используя axios
У меня есть список идентификаторов в массиве, поэтому я хотел бы передать каждый идентификатор в конечную точку API, чтобы получить информацию об этом конкретном идентификаторе, поэтому я хочу сделать это параллельно, а не по одному вызову, Итак, я использую axios, а также, если есть 1000 идентификаторов в виде партии, я хочу вызвать 100 идентификаторов параллельно и снова оставить 100 идентификаторов. Может ли кто-нибудь предложить мне решение для этого подхода.
Вот код:
const getApiResponse=(gitIds)=>{
let responseArray=[];
return listOfIds?.map((listId)=>{
const fetcServiceData = async (): Promise<void> => {
return api.get(`api-end-point/${listId}`);
};
fetcServiceData()
.then((value:any) => {
const response = {
studentName: value.name,
grade: value.grade,
}
responseArray=[...responseArray,response]
return responseArray
})
.catch((error)=>{
console.info(error)
})
return responseArray;
})
}
Итак, пока ваш код ничего не делает для группирования ваших запросов партиями по 100. Что вы пробовали до сих пор?
Ответы 3
Мне нравится этот шаблон цепочки обещаний, возвращая их, чтобы сохранить цепочку обещаний.
Как это:
axios
.get('https://maps.googleapis.com/maps/api/geocode/json?&address=' + this.props.p1)
.then(response => {
this.setState({ p1Location: response.data });
return axios.get('https://maps.googleapis.com/maps/api/geocode/json?&address=' + this.props.p2);
})
.then(response => {
this.setState({ p2Location: response.data });
return axios.get('https://maps.googleapis.com/maps/api/geocode/json?&address=' + this.props.p3);
})
.then(response => {
this.setState({ p3Location: response.data });
}).catch(error => console.info(error.response));
Это займет больше времени, чтобы получить все данные.
Я думаю, что это нормально, потому что это будет служить цели.
Но вызывает ли он API параллельно? и как передать 100 пакетов за один раз, а остальные идентификаторы - в другом пакете?
Да Вы можете разобрать так: const reqOne = axios.get(endpoint); const reqTwo = axios.get(конечная точка); axios.all([reqOne, reqTwo]).then(axios.spread((...responses) => { const responseOne = responses[0] const responseTwo = responses[1] })).catch(errors => { // реагировать на ошибки. })
У вас должна быть возможность создать несколько промисов, поместить их в массив и использовать Promise.all, чтобы выполнить их все вместе.
Keep in mind that Promise.all rejects as soon as any of those promises is rejected with the first error message.
Пример:
const promise1 = fetchServiceData();
const promise2 = fetchServiceData();
Promise.all([promise1, promise2]).then(response => {
const promise1Response = response[0];
const promise2Response = response[1];
// Do something with these responses.
}).catch(err => {
// Do something with the error
});
Привет. Предположим, если у меня есть 2000 записей, я должен объявить столько констант, верно? это хороший подход?
Вы можете сделать это в цикле и обрабатывать записи небольшими партиями по 20-50 и т. д.
Promise
.all(/* list of async calls */)
.then(doSomethingWithTheResults)
будет делать то, что вы хотите.
Однако в том маловероятном случае, если вы действительно это делаете, вы должны задать себе вопрос, почему я засоряю свою строку запроса?
Скажем, я прошу 10 тысяч записей...
асинхронно...
на мой сервер...
и 10 пользователей делают то же самое...
Не займет ли это ужасно много времени? Выполняю ли я скрытую DDoS-атаку с помощью собственного кода?
Более предпочтительным способом решения этой проблемы является добавление конечной точки API, в которой вы можете указать количество идентификаторов, которые возвращают вам нужные данные.
const fetchServiceData = async (listIds: string[]): Promise<ListItem[]> => {
return api.get(`api-end-point?listids=${listIds.join(',')}`);
};
Отвечает ли это на ваш вопрос? Множественный вызов запросов Axios.all из массива с несколькими ссылками