我在 Javascript 中链接异步代码时遇到问题

Question

I am trying to execute allCountryData and return a promise its working fine but after allCountryData is done executing I want to perform a operation on that returned data / or allCountryDataArray and store the highest values in arrayOfHighestCases

Note I can't chain the other login in allCountryData.

Please help let me know if you need any more details

export const allCountryDataArray = [];
export const arrayOfHighestCases = [];

const allCountryData = async () => {
  sendHTTP()
    .then((res) => {
      return res.response;
    })
    .then((res) => {
      allCountryDataArray.push(...res);
      return allCountryDataArray;
    });
  return await allCountryDataArray;

  // Highest Cases
};

The code is below is not working

const highestCasesData = async () => {
  // const allCountryDataArrayy = await allCountryData();
  // allCountryData()
  // .then((data) => {
  //   console.log(arrayOfHighestCases[0]);
  // })
  // .then((res) => {
  const np = new Promise((res, rej) => {
    res(allCountryData());
  });

  return np.then((res) => {
    console.log(res);
    const arrayofHigh = allCountryDataArray.sort((a, b) => {
      if (a.cases.total < b.cases.total) {
        return 1;
      } else if (a.cases.total > b.cases.total) {
        return -1;
      } else {
        return 0;
      }
    });
    console.log(arrayofHigh);
    const slicedArray = arrayofHigh.slice(0, 6);
    for (const eachHighCase of slicedArray) {
      arrayOfHighestCases.push(eachHighCase);
    }
    console.log(arrayOfHighestCases);
    return arrayOfHighestCases;
  });

  // });
};
highestCasesData();

Answer 1

Filling global arrays with async data is a way into timing conflicts. Bugs where the data ain't there, except when you look it is there and yet another question here on my SO about "Why can't my code access data? When I check in the console everything looks fine, but my code ain't working."

If you want to store something, store Promises of these arrays or memoize the functions.

const allCountryData = async () => {
  const res = await sendHTTP();
  return res.response;
};

const highestCasesData = async () => {
  const allCountryDataArray = await allCountryData();

  return allCountryDataArray
    .slice()  // make a copy, don't mutate the original array
    .sort((a, b) => b.cases.total - a.cases.total)  // sort it by total cases DESC
    .slice(0, 6); // take the first 6 items with the highest total cases
}

Answer 2

This is working please let me know if I can make some more improvements

const allCountryData = async () => {
  return sendHTTP()
    .then((res) => {
      return res.response;
    })
    .then((res) => {
      allCountryDataArray.push(...res);
      return allCountryDataArray;
    });

  // Highest Cases
};

const highestCasesData = async () => {

  return allCountryData().then((res) => {
    console.log(res);
    const arrayofHigh = allCountryDataArray.sort((a, b) => {
      if (a.cases.total < b.cases.total) {
        return 1;
      } else if (a.cases.total > b.cases.total) {
        return -1;
      } else {
        return 0;
      }
    });
    console.log(arrayofHigh);
    const slicedArray = arrayofHigh.slice(0, 6);
    for (const eachHighCase of slicedArray) {
      arrayOfHighestCases.push(eachHighCase);
    }
    console.log(arrayOfHighestCases);
    return arrayOfHighestCases;
  });

};
highestCasesData();