arrays（Promise.all or for..of）的异步处理

Question

I know there is a lot of information on this and I have read several articles, but I am still wandering.

I have an array of HTTP request urls. The order of each element in the array is very important. I want to get a response by fetching these request urls, and put the responses in the same order as the original array.

Below is the code I wrote. I thought it was right to use promise.all. We found promise.all to process arrays in parallel, but ordering is not guaranteed. (Is this correct?)

const getAllImagePaths = async urls => {
  let copyPaths = [];

  try {
    const data = await Promise.all(urls.map(url => fetch(url)));

    for (let item of data) {
      const { url } = item;
      copyPaths.push(url);
    }

    return copyPaths;
  } catch (err) {
    const { response } = err;

    if (response) alert(MESSAGES.GET_PHOTOS_FAIL);
  }
};

So I modified the code by using the for..of statement.

const getAllImagePaths = async urls => {
  let copyPaths = [];

  try {
    for(let url of urls) {
      const res = await fetch(url);
      const json = await res.json();
      const data = json.parse();

      const { url } = data;

      copyPaths.push(data);
    }

    return copyPaths;
  } catch (err) {
    const { response } = err;

    if (response) alert(MESSAGES.GET_PHOTOS_FAIL);
  }
};

However, when the for of statement is used, the response type of the data is 'cors'.

So to fix this, should I change the data to json and then parse the json again to use the data? I think this is very weird. This is because I only want to contain information called 'url' in the response object in the array.

Answer 1

We found promise.all to process arrays in parallel, but ordering is not guaranteed. (Is this correct?)

No, it isn't correct. The result array you get on fulfillment of the Promise.all promise is in the same order as the input array, regardless of the order in which the input promises settled. Here's an example:

 function delayedValue(ms, value) { return new Promise(resolve => { setTimeout(() => { console.log(`Resolving with ${value}`); resolve(value); }, ms); }); } async function example() { const results = await Promise.all([ delayedValue(100, 1), delayedValue(10, 2), delayedValue(200, 3), ]); console.log(`results: ${results}`); } example();

So you can just use the result directly:

const getAllImagePaths = async urls => {
  try {
    const data = await Promise.all(urls.map(url => fetch(url)));
    return data;
  } catch (err) {
    const { response } = err;

    if (response) alert(MESSAGES.GET_PHOTOS_FAIL);
  }
};