JavaScript：可变长度循环中HTTP请求完成后执行操作的方法

你的核心问题是异步请求未完成时就执行了后续代码，因为request是回调式的异步操作，循环发起请求后，代码会直接走到console.log(response)，此时所有请求还在后台运行，response还没被填充完整。

解决方案：用Promise统一管理所有异步请求 #

不管请求数量多少，都可以通过Promise.all等待所有请求完成后再处理结果。步骤如下：

1. 把request回调封装成Promise函数
   先将原本的回调式请求转换成Promise，这样就能用Promise的API来管理异步流程：

   const request = require('request');
   
   // 封装获取词性的Promise函数
   function getPartOfSpeech(word) {
     return new Promise((resolve) => {
       const options = {
         url: `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`,
         json: true
       };
   
       request(options, (err, res, body) => {
         if (err) {
           console.error(`请求单词${word}出错:`, err);
           resolve("undefined");
           return;
         }
   
         let partOfSpeech;
         try {
           partOfSpeech = body[0].meanings[0].partOfSpeech;
         } catch (err) {
           partOfSpeech = "undefined";
         }
         resolve(partOfSpeech);
       });
     });
   }
   

2. 生成请求Promise数组并等待全部完成
   对单词数组去重后，生成对应的Promise数组，用Promise.all等待所有请求结束，再统一构建response对象：

   // 模拟从文件读取的单词数组
   const words = ["hello", "there"];
   // 去重，避免重复请求同一个单词
   const uniqueWords = [...new Set(words)];
   
   // 生成所有请求的Promise数组
   const requestPromises = uniqueWords.map(word => getPartOfSpeech(word));
   
   // 等待所有请求完成后处理结果
   Promise.all(requestPromises)
     .then(posList => {
       const response = {};
       uniqueWords.forEach((word, index) => {
         response[word] = posList[index];
       });
       // 这里就是所有请求完成后的操作
       console.log(response);
       // 可以在这里返回response或进行其他业务处理
     });
   

更简洁的async/await写法 #

如果习惯同步风格的代码，可以用async/await改写，逻辑更直观：

async function processWords() {
  const words = ["hello", "there"];
  const uniqueWords = [...new Set(words)];
  const response = {};

  for (const word of uniqueWords) {
    response[word] = await getPartOfSpeech(word);
  }

  console.log(response);
}

// 执行函数
processWords();

为什么原代码不生效？ #

原循环中发起的每个request都是异步的，JavaScript会继续执行后续代码，所以console.log(response)会在所有请求完成前执行，此时response还是空对象或只有部分数据。而Promise.all会等待所有异步请求的Promise状态变为resolved后，才会执行then里的逻辑，确保所有数据都已填充完成。

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