如何在AngularJS的updateData中执行多个$http.post请求且不修改save函数？

并行执行多个POST请求 #

如果多个请求之间没有依赖关系，可以并行发起，使用AngularJS的$q.all()将多个Promise合并为一个，保持返回值的Promise特性，这样控制器的save函数无需任何修改。

修改后的updateData函数 #

// 确保service已注入$q和$http
self.updateData = function(data) {
  // 定义多个POST请求，可根据需求调整请求地址和参数
  const request1 = $http.post(url1, data);
  const request2 = $http.post(url2, { id: data.id });
  // 合并所有请求为一个Promise
  return $q.all([request1, request2])
    .then(function(results) {
      // 可根据需求处理多个请求的返回结果，这里保持和原逻辑一致返回第一个请求的结果
      return returnData(results[0]);
    });
};

原理说明 #

$q.all()会等待所有传入的Promise都成功resolve后，才触发外层的then；只要有任何一个请求失败reject，就会直接进入catch，这和原单个请求的Promise行为完全一致，因此控制器的save函数无需修改。

顺序执行多个POST请求 #

如果多个请求有依赖关系（比如第二个请求需要第一个请求的返回数据），可以通过Promise链式调用实现顺序执行，同样保持返回Promise的结构。

修改后的updateData函数 #

self.updateData = function(data) {
  // 先执行第一个请求
  return $http.post(url1, data)
    .then(function(firstResponse) {
      // 使用第一个请求的返回数据作为第二个请求的参数
      return $http.post(url2, { id: firstResponse.data.id });
    })
    .then(function(secondResponse) {
      // 最后处理最终的返回数据，保持和原逻辑一致
      return returnData(secondResponse);
    });
};

原理说明 #

链式调用的then会在前一个请求成功后才执行下一个请求，整个链式调用最终返回的Promise，只有当所有请求都成功时才会resolve，任何一步失败都会触发catch，完全兼容原控制器save函数的逻辑。

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