javascript - AngularJS 中的 API 调用是连续的

Question

我在 Ionic 移动项目中使用 Angular 时遇到问题，这段代码在我的桌面环境中运行良好。我对 Web 服务器进行了 3 个 API 调用，每次调用间隔 500 毫秒。但在使用较低连接的电话中，有时其中一个调用会失败，从而导致整个过程失败。 有没有什么办法可以在前一个 API 调用完成的同时进行 API 调用？我的意思是，不使用固定的时间。

//get member information
$timeout(function() {
  membersService.getMember(community.url, community.user.api_key, community.user.auth_token, $stateParams.userId).
  success(function(data) {
    $scope.member = data.result;
  });
}, 500);

$timeout(function() {
  messagesService.getConversation(community.url, community.user.api_key, community.user.auth_token, community.user.user_info.guid, $stateParams.userId, "from").
  success(function(data) {
    if(data.result["entities"].length > 0)  {
      messages = messages.concat(data.result["entities"]);
      subject = "Re: "+data.result["entities"][data.result["entities"].length-1].title;
    }
    $scope.messageData.subject = subject;
  });
}, 1000);

$timeout(function() {
  messagesService.getConversation(community.url, community.user.api_key, community.user.auth_token, community.user.user_info.guid, $stateParams.userId, "to").
  success(function(data) {
    log = [];
    if(data.result["entities"].length > 0)  {
      angular.forEach(data.result["entities"], function(v, k) {
        v.owner_guid = $stateParams.userId;
        log.push(v);
      }, log);
      messages = messages.concat(log);
    }
    var log = [];
    var count = 0;
    angular.forEach(messages, function(v, k) {
      messages_reorder.push(v);
    }, log);
  });
}, 1500);

Answer 1

这是实现嵌套 promise 链的结果:

var loadMemberInfo = function( userId ) 
{
  return membersService
    .getMember(community.url, community.user.api_key, community.user.auth_token, $stateParams.userId)
    .then(function(data) 
    {
      $scope.member = data.result;
    });
},
getConversationFrom = function()  {
  return messagesService
  .getConversation(community.url, community.user.api_key, community.user.auth_token, community.user.user_info.guid, $stateParams.userId, "from")
  .then(function(cf) {
    if(cf.data.result["entities"].length > 0)  {
      messages = messages.concat(cf.data.result["entities"]);
      subject = "Re: "+cf.data.result["entities"][cf.data.result["entities"].length-1].title;
    }
    $scope.messageData.subject = subject;
  });
},
getConversationTo = function()  {
  messagesService
  .getConversation(community.url, community.user.api_key, community.user.auth_token, community.user.user_info.guid, $stateParams.userId, "to")
  .then(function(ct) {
    log = [];
    if(ct.data.result["entities"].length > 0)  {
      angular.forEach(ct.data.result["entities"], function(v, k) {
        v.owner_guid = $stateParams.userId;
        log.push(v);
      }, log);
      messages = messages.concat(log);
    }
    //order array
    messages = messages.sort(function(a,b) { return a.time_created - b.time_created } );

    var log = [];
    var count = 0;

    angular.forEach(messages, function(v, k) {
      messages_reorder.push(v);
    }, log);
  });
},
orderFullConversation = function()  {
  $ionicLoading.hide();
  console.log(messages);
  if(messages_reorder.length > 5) {
    var messages_partial = messages_reorder.slice(messages_reorder.length-5,messages_reorder.length);
  }
  else  {
    var messages_partial = messages_reorder;
  }
  $scope.messages = messages_partial;
  $scope.community = community;
};


loadMemberInfo( $stateParams.userId )
  .then( getConversationFrom )
  .then( getConversationTo )
  .then( orderFullConversation );

更多详情here