如何在Promise.all的Map处理中为每个GET请求添加后置延迟？

嘿，我来帮你搞定给每个GET请求添加完成后延迟的需求！最直接的做法是在处理单个请求的getSearchResultsForOnePage函数里，把延迟逻辑插入到请求成功的Promise链中。下面是具体的实现步骤和完整代码：

1. 先封装一个通用的延迟函数 #

我们需要一个返回Promise的延迟工具函数，它会在指定的毫秒数后完成：

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

2. 修改单个请求的处理逻辑 #

在getSearchResultsForOnePage里，当我们拿到请求返回的JSON数据后，通过链式调用延迟函数，确保数据会在延迟后才被传递到下一个Promise环节：

function getSearchResultsForOnePage(url) {
  return fetch(url, { credentials: 'include' })
    .then(function(response) {
      // 额外优化：先检查请求是否成功，避免解析错误响应
      if (!response.ok) {
        throw new Error(`Request failed with status ${response.status}`);
      }
      return response.json();
    })
    .then(function(data) {
      // 把500改成你需要的延迟时长（单位：毫秒）
      return delay(500).then(() => data);
    })
    .catch(function(error) {
      // 可选：如果需要在请求失败时也添加延迟，可以取消下面的注释
      // return delay(500).then(() => Promise.reject(error));
      throw error; // 保留原错误抛出逻辑
    });
}

3. 完整的修改后代码 #

把所有部分整合起来，最终代码如下：

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

function getAllSearchResultProfiles(searchAjaxUrl) { 
  var ajaxUrls = []; 
  for (var i = 0; i < numResults; i += resultsPerPage) { 
    ajaxUrls.push(searchAjaxUrl + "&start=" + i); 
  } 
  return Promise.all(ajaxUrls.map(getSearchResultsForOnePage)) 
    .then(function(responses) { 
      return responses.map(function(response) { 
        if (response.meta.total === 0) { 
          return []; 
        } 
        return response.result.searchResults.map(function(searchResult) { 
          return searchResult; 
        }); 
      }); 
    }) 
    .then(function(searchProfiles) { 
      return [].concat.apply([], searchProfiles); 
    }) 
    .catch(function(error) { 
      console.error('Error fetching results: ', error); 
    }); 
} 

function getSearchResultsForOnePage(url) { 
  return fetch(url, { credentials: 'include' }) 
    .then(function(response) {
      if (!response.ok) {
        throw new Error(`Request failed with status ${response.status}`);
      }
      return response.json();
    })
    .then(function(data) {
      // 这里设置延迟，比如500毫秒
      return delay(500).then(() => data);
    })
    .catch(function(error) {
      // 可选：失败时也添加延迟再抛出错误
      // return delay(500).then(() => Promise.reject(error));
      throw error;
    });
}

额外说明：并行与串行请求的区别 #

原代码用Promise.all是并行发起所有请求，每个请求完成后各自延迟，最后一起汇总结果。如果你需要串行执行（即上一个请求完成+延迟后，再发起下一个请求），可以把Promise.all替换成reduce来实现串行链：

// 替换原Promise.all的部分
return ajaxUrls.reduce((chain, url) => {
  return chain.then(results => {
    return getSearchResultsForOnePage(url)
      .then(result => [...results, result]);
  });
}, Promise.resolve([]));

这样就能保证请求按顺序执行，每个请求完成后延迟，再进行下一个。

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