javascript - 取消 Restangular 中待处理的 API 调用

Question

我有API服务:

var SearchSuggestionApi = function (Restangular) {

  return {
    getSuggestion: function (keyword) {
      return Restangular.one('search').customGET(null, {keyword:keyword});
    }
  };

};

SearchSuggestionApi.$inject = [
  'Restangular'
];

我有 Controller 来调用此 API:

vm.getSuggestion = function (keyword) {

  SearchSuggestionApi.getSuggestion(keyword)
    .then(
      function (data) {
        vm.listData = data;
      }, function (error) {
        console.log(error);
      });
};

我的问题是当我调用 vm.getSuggestion(keyword) 两次或多次(必须调用一次以上)时。如:

vm.getSuggestion('a');//=> 返回一个包含多个对象的数组vm.getSuggestion('a b');//=> 返回空数组

由于vm.getSuggestion('a')返回的数据较多，因此会在vm.getSuggestion('a b')之后完成。所以 vm.listData 是 [{object1}, {object2}, ...]，但我想 vm.listData 是 [](最后一个函数的响应数据)。

当我调用秒函数或其他方法来获取最后的响应数据并设置vm.listData时，如何取消第一个函数中待处理的API调用。

我研究了一些关于取消挂起的 API 调用的文章，但它对我解决问题没有帮助。

感谢您的帮助:)

Answer 1

有多种方法可以解决这个问题:

• 您可以简单地在 then 回调中检查收到的值是否仍然是当前值:

  vm.getSuggestion = function (keyword) {
  
    SearchSuggestionApi.getSuggestion(keyword)
      .then(
        function (data) {
          if (vm.keyword === keyword) {
              vm.listData = data;
          }
        }, function (error) {
          console.log(error);
        });
  };
  

• 您可以通过指定 timeout promise 来取消请求

• 如果您经常解决此问题，您可能希望将 Promise 替换为 RxJS具有适当运算符的可观察流。这是最干净的解决方案，但确实需要额外的库。