使用 Angular 使用 $interval 或承诺在 api 完成时运行代码？答案

【问题标题】：Using angular using $interval or a promise to run code when api is completed?使用 Angular 使用 $interval 或承诺在 api 完成时运行代码？
【发布时间】：2015-11-18 11:33:34
【问题描述】：

我有一个 api 调用有点慢。

$http.jsonp(url, {
    params: {
      'client': 'translate_about',
      'alpha': 1,
      'hl': 'en'
    }
  })
    .success(function (data) {
      home.translate.list = data.sl;
      //console.log(data.sl);
    });

下一个块可以在home.translate.list 准备好之前或同时发生。因此，当home.translate.list 成功时，我需要另一个代码块来更新。

  home.modalOn = function (val) {
    //open modal
    home.isModal = true;
    //this if block must wait for home.translate.list to be ready.
    if(typeof home.translate.list !== 'undefined'){
      home.activePageSelection = home.translate.list[val];
      //call wikipedia and get data
      home.callWiki(home.translate.list[val]);
    }
  };
  $scope.$watch(function () {
    return location.hash
  }, function (value) {
    var currentRouteParam = value.split('/').slice(-1)[0];

    if (currentRouteParam !== '') {
      home.modalOn(currentRouteParam);
    } else {
      home.modalOff()
    }

  });

问题：

如何确保在执行 if 块之前定义了 home.translate.list？警告，不要把它放在$http.success 块中。

【问题讨论】：

你在哪里打电话给home.modalOn？
当哈希值改变时。当有人进行深度链接时，这可能会出现问题
添加了参考@AnikIslamAbhi

标签： javascript angularjs ajax promise

【解决方案1】：

这样试试

if (currentRouteParam !== '') {
    var interval = $interval(function() {
        if (typeof home.translate.list !== 'undefined') {
            $interval.cancel(interval);
            home.modalOn(currentRouteParam);
        }
    }, 500);

}

N:B：

你必须在你的控制器中注入 $interval 服务

【讨论】：

【解决方案2】：

我建议你把watch放在一个函数中，然后在success块中调用它

.success(function (data) {
    home.translate.list = data.sl;
    watchHash();  
    //console.log(data.sl);
});

function watchHash() {
    $scope.$watch(function () {
    ...
}

【讨论】：

这样你就可以确定它会一直工作:)

【解决方案3】：

你可以保存翻译的承诺而不是你的虚拟机中的列表：

home.translatePromise = $http.jsonp(url, {
    params: {
      'client': 'translate_about',
      'alpha': 1,
      'hl': 'en'
    }
  })
  .then(function (response) {
      return response.data.sl;
  });

然后引用 promise 而不是原始值：

home.modalOn = function (val) {
  //open modal
  home.isModal = true;
  //this if block must wait for home.translate.list to be ready.
  home.translatePromise.then(function(list){
    home.activePageSelection = list[val];
    //call wikipedia and get data
    home.callWiki(list[val]);
  });
};

【讨论】：

op 提到了警告，没有将它放在 $http.success 块中。
我认为这个警告意味着只执行 home.modalOn 路径中的 activePageSelction/callWiki 代码。
@BradBarber 奇怪的是该列表未定义。有什么想法吗？
您能否在return response.data.sl; 上设置断点并检查响应对象以确保它符合您的预期？
.success 已弃用，因此您现在应该使用 .then ，它不会传播响应对象。所以，.then 需要返回 response.data.sl。