在 Restangular 中取消挂起的 API 调用

Question

我有 API 服务：

var SearchSuggestionApi = function (Restangular) {

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

};

SearchSuggestionApi.$inject = [
  'Restangular'
];

我有控制器来调用这个 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'); // => Return a array with many object in this vm.getSuggestion('a b');// => Return empty array

因为vm.getSuggestion('a')返回的数据很多，所以会在vm.getSuggestion('a b')之后结束。所以vm.listData是[{object1}, {object2}, ...]，但是我想vm.listData是[]（最后一个函数的响应数据）。

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

我研究了一些关于cancel pending API calls 的文章，但对我的问题没有帮助。

感谢您的帮助:)

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来取消请求

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