一个$ http请求到api成功后,Angular $ q库链接方法?

时间:2015-12-16 19:36:21

标签: javascript angularjs ajax asynchronous angular-promise

我之前从未写过承诺,但我觉得这段代码传达了我的意图。

问题: 在我的http请求完成,转换并返回之后,如何在init块中异步触发matchData()countData()

 function getLangData(langCode) {

    var url = "https://translate.google.com/translate_a/l?cb=JSON_CALLBACK";
      return $q(function(resolve, reject) {    
      $http.jsonp(url, {
        params: {...}
      })
        .success(function (translateAPIData) {
                 return translateAPIData.map(function(){...});
          });
        });

      });
  }

function init() {
  var promise = getLangData(languageCode);
  promise.then(function(mappedData) {
     matchData(mappedData);
  });
  promise.then(function(mappedData) {
     countData(mappedData);
  });  

  }); 
}

2 个答案:

答案 0 :(得分:5)

您不需要使用$q创建自己的承诺,因为$ http方法默认返回一个承诺,您可以通过调用.then方法来利用它。

function getLangData(langCode) {

    var url = "https://translate.google.com/translate_a/l?cb=JSON_CALLBACK";
      //returned promise object from method
      return $http.jsonp(url, {
        params: {...}
      })
      .then(function (response) {
           var translateAPIData = response.data;
           return translateAPIData.map(function(){...});
      });
}

<强>代码

您可以通过对该方法执行.then来调用promise方法。

function init() {
  var promise = getLangData(languageCode);
  promise.then(function(mappedData) {
     matchData(mappedData);
     countData(mappedData);
  }); 
};

答案 1 :(得分:1)

是$ http会返回一个承诺,但不一定会将它恢复到您的计数和匹配功能的init方法中。这是使用$ q的解决方案。

function getLangData(langCode) {

var url = "https://translate.google.com/translate_a/l?cb=JSON_CALLBACK";
var defer = $q.defer();

$http.jsonp(url, {
    params: {...}
  }).then(function (translateAPIData) {
      defer.resolve(translateAPIData.map(function(){...}));
  });

  return $q.promise;
}

function init() {

 getLangData(languageCode).then(function(mappedData) {
   //Do something with your data here.
   /*
   matchData(mappedData); 
   countData(mappedData);
   */
})
}