Angular 1.6循环调用REST接口异步问题求助：实现顺序执行

你遇到的问题核心在于异步操作的并行特性：forEach是同步遍历，会立刻触发所有restCall请求，而这些请求都是异步的——所以会先一次性输出三个Start，等所有请求都跑完才依次输出end。要实现Start end Start end Start end的顺序，就得让这些异步请求串行执行，也就是等前一个请求完全结束后，再发起下一个。

下面给你两种实用的解决方案：

方案一：利用$q链式调用（推荐） #

AngularJS的$q服务天生适合管理异步操作的顺序。首先需要把你的回调式restCall包装成返回Promise的函数，再通过reduce构建Promise链，逐个执行请求。

步骤1：把restCall包装成Promise #

如果你的restCall是基于AngularJS的$http，那它本身就返回Promise；如果是自定义的回调函数，可以简单包装一下：

function restCallPromise(url) {
  return $q(function(resolve, reject) {
    restCall(url, function(response) {
      resolve(response);
    }, function(error) { // 可选：添加错误处理
      reject(error);
    });
  });
}

步骤2：构建串行执行的Promise链 #

修改你的fun1函数，用reduce把每个请求串起来：

$scope.fun1 = function(list) {
  // 初始化一个已完成的Promise作为链的起点
  let promiseChain = $q.resolve();
  
  list.reduce(function(chain, value) {
    return chain.then(function() {
      console.log("Start");
      // 等当前请求完成后，才会进入下一个then
      return restCallPromise(`你的目标URL/${value}`); // 根据value拼接实际请求地址
    }).then(function(response) {
      console.log(response); // 这里拿到的就是'end'
    });
  }, promiseChain);
};

方案二：递归函数实现串行 #

另一种直观的方式是写递归函数，每次只处理列表里的一个元素，当前请求的回调执行完后，再递归处理下一个元素：

$scope.fun1 = function(list) {
  // 定义递归处理函数
  function processNext(index) {
    if (index >= list.length) {
      return; // 遍历结束，退出递归
    }
    let value = list[index];
    console.log("Start");
    restCall(`你的目标URL/${value}`, function(response) {
      console.log(response); // 输出'end'
      // 当前请求完成，继续处理下一个元素
      processNext(index + 1);
    });
  }
  
  // 从第一个元素开始执行
  processNext(0);
};

为什么这两种方案能解决问题？ #

• 方案一通过$q的Promise链，确保每个请求都在前一个请求的then阶段发起，只有前一个Promise执行完成，才会触发下一个请求。
• 方案二通过递归逻辑，把下一个请求的触发时机绑定在前一个请求的回调里，天然保证了串行顺序。

这样修改后，就能完美实现你想要的Start end Start end Start end输出顺序了。

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