JavaScript异步代码链式调用异常：allCountryData执行后处理返回数据

• allCountryData 内部的 sendHTTP() 链式调用没有做返回，async 函数不等接口请求完成就直接走到了return await allCountryDataArray，此时全局数组还是空值，下游逻辑根本拿不到有效数据
• 没有等待 allCountryData 的全异步流程跑完就读取全局的 allCountryDataArray，存在时序错位，必然拿到空结果
• 手动用new Promise包裹allCountryData()是完全冗余的写法，async函数本身就会返回可调用.then的Promise对象，不需要额外包装

要求不能把后续最高值处理逻辑链式写入allCountryData内部，因此我们保持allCountryData职责单一，只负责拉取数据、填充全局数组，所有最高值处理逻辑完全独立在外层实现。

1. 修正allCountryData的基础返回逻辑（不嵌入任何最高值处理代码） #

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

const allCountryData = async () => {
  // 补上原代码缺失的return，让async函数等待完整的异步流程执行完
  return sendHTTP()
    .then((res) => res.response)
    .then((res) => {
      allCountryDataArray.push(...res);
      return allCountryDataArray;
    });
};

注：原代码里写在链式调用外面的return await allCountryDataArray需要直接删掉，这行代码会导致async函数不等异步请求完成就提前返回空数组。

2. 独立编写最高值处理逻辑，与allCountryData完全解耦 #

const highestCasesData = async () => {
  // 直接等待allCountryData的异步流程执行完成，拿到填充后的完整数组
  const fullCountryList = await allCountryData();

  // 浅拷贝数组再排序，避免直接修改原全局数组的顺序影响其他业务
  const sortedDescByCases = [...fullCountryList].sort((a, b) => {
    return b.cases.total - a.cases.total;
  });

  // 取前6个最高值的条目
  const topSix = sortedDescByCases.slice(0, 6);

  // 清空原有数组，避免重复调用时叠加旧数据
  arrayOfHighestCases.length = 0;
  arrayOfHighestCases.push(...topSix);

  return arrayOfHighestCases;
};

// 执行处理流程
highestCasesData().then(result => {
  console.log('已填充的最高值数据数组：', result);
});

• 排序操作尽量操作数组的拷贝版本，不要直接对全局的allCountryDataArray做排序，避免数组顺序被意外修改影响其他依赖该数组的逻辑
• 推入arrayOfHighestCases前先清空原有内容，否则重复触发函数时会把多次计算的结果叠在数组里，出现重复值
• 不需要额外手动包装Promise、嵌套多余的then链，async函数本身的异步时序能力完全可以覆盖当前场景的需求

内容的提问来源于stack exchange，提问作者Code Centrix