从多个 api 查询按顺序返回结果

Question

I want to make multiple API calls from an array of values. I would like to resolve the first call, then the second, third, and so on in the order in which the API request receives the data. everything I've tried gets me to the point of logging the final data in the console or resolving the data but not necessarily returning the array of data in the format with which the requests were made. Below is one of the solutions I was recently playing with. It definitely does not work (and there are a lot of issues with it) but I do see the unresolved data in the console. The console.logs just show the points where some sort of accurate data is returned as an unresolved promise

Function

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)
};

It is called here for now in a use effect

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

API call

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

Answer 1

You need to call Promise.all on the main asynchronous requests - the getTrackingUrl - for the order to be preserved:

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);
        }))
    )))
);

When you want to preserve order, .push after an asynchronous request is almost never the right approach.

Answer 2

you can try

 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