Возврат результатов в их порядке из нескольких запросов api

#javascript

Вопрос:

Я хочу сделать несколько вызовов API из массива значений. Я хотел бы разрешить первый вызов, затем второй, третий и так далее в порядке, в котором запрос API получает данные. все, что я пробовал, приводит меня к тому, что я регистрирую окончательные данные в консоли или разрешаю данные, но не обязательно возвращаю массив данных в формате, в котором были сделаны запросы. Ниже приведено одно из решений, с которым я недавно играл. Это определенно не работает (и с этим связано много проблем), но я вижу неразрешенные данные в консоли. console.logs Просто покажите точки, в которых какие-то точные данные возвращаются как невыполненное обещание

Функция

 const sendTrackingData =  (storeKey, deliveries) => {
    const trackingUrl = deliveries.map(async (delivery) => {
        const urlData = []

        delivery.parcels.map(async (parcel) => {
            const {trackingData} = parcel;
            const carrier = trackingData.carrier.toLowerCase();
            const trackingCode = trackingData.trackingId;
            urlData.push(await getTrackingUrl(storeKey, carrier, trackingCode))
        })
        console.log(urlData)
        return urlData
    })
    return Promise.all(trackingUrl)
};

Это называется здесь на данный момент в use effect

     const test = await sendTrackingData(storeKey, deliveries)
    console.log(test,'the test url data =========>')

Вызов API

 export const getTrackingUrl =  (storeKey, carrier, trackingCode) => {
    return axios.post(`random-url-address/returnedData`, {
        storeKey,
        carrier,
        trackingCode,
    });
};

Ответ №1:

Вам нужно вызвать Promise.all основные асинхронные запросы — the getTrackingUrl — для сохранения порядка:

 const sendTrackingData = (storeKey, deliveries) => (
    Promise.all(deliveries.map((delivery) => (
        Promise.all(delivery.parcels.map((parcel) => {
            const { trackingData } = parcel;
            const carrier = trackingData.carrier.toLowerCase();
            const trackingCode = trackingData.trackingId;
            return getTrackingUrl(storeKey, carrier, trackingCode);
        }))
    )))
);

Когда вы хотите сохранить порядок, .push после асинхронного запроса почти никогда не бывает правильным подходом.

Ответ №2:

вы можете попробовать

 delivery.parcels.map(async (parcel , index) => {
            const {trackingData} = parcel;
            const carrier = trackingData.carrier.toLowerCase();
            const trackingCode = trackingData.trackingId;
            
            urlData.splice(index, 0, await getTrackingUrl(storeKey, carrier, trackingCode));
        })
        console.log(urlData)
        return urlData