AngularJS - 如何取消一个Promise？

Question

假设我有一个输入文本字段（类似于Google搜索字段），当更改时，会触发请求并显示一些结果。

例如，

让我们在输入框中输入Dog：

typed D -> Calls ctrl.search('D') -> Makes a request -> Changes model when success
typed DO -> Calls ctrl.search('DO') -> Makes a request -> Changes model when success
typed DOG -> Calls ctrl.search('DOG') -> Makes a request -> Changes model when success.

现在，假设DO请求的响应比DOG慢。尽管我输入的是DOG，但我的模型最终将使用DO的结果。

为了解决这个问题，我需要一种方法来取消或中止当前正在进行的请求，如果我继续输入字符，那么只有最终请求会影响到我的模型。

我的输入看起来像下面这样:

<input type="text" class="form-control" data-ng-model="query" data-ng-change="ctrl.search(query)" placeholder="Search" />

这是我的searchCtrl.js文件:

var search;
var language;
var _this;

var SearchCtrl = function (searchService, lang)
{
     search = searchService;
     langauge = lang;
     _this = this;
}

SearchCtrl.prototype.search = function (text)
{
    var promise = search.language(language)
                  .facet('characters')
                  .highlight('quotes')
                  .query(text);

    promise.then(function (response) {
         if(!response) return;
         _this.total = response.total;
         _this.count = response.found;
         _this.result = response.data;
    });
}

- Matias Cicero

---

我们不能取消 Promise，只能通过 reject 或 resolve 来完成它。 - Pankaj Parkar

1. 在文本框中使用防抖功能，可以使用ng-model-options。
2. 您可以向http选项的timeout属性提供一个promise，您可以通过拒绝该延迟对象来取消它，但请求仍将由服务器处理，只是在客户端级别被拒绝。

- PSL

最好的解决方法可能是在打字短暂停顿之前不要发送请求。如果服务器已经接收到请求，取消请求并不会阻止服务器继续处理它。请查看https://docs.angularjs.org/api/ng/directive/ngModelOptions，特别是防抖选项。 - Kevin B

Answer 1

通常情况下，人们会使用ng-model-options={debounce: 100}来解决这个问题。详细信息请看https://docs.angularjs.org/api/ng/directive/ngModelOptions。无论如何，您都可以拒绝承诺。

- Errorpro

---

这个方法很有效！非常感谢！这是在发送每个请求之前的延迟吗？ - Matias Cicero

是的，它会帮助你的 ;) 不用谢。 - Errorpro

@MatiasCicero，它基本上是一个超时计时器，每次值改变时都会重置。因此，如果值停止改变100毫秒，计时器将结束并发送请求。 - Kevin B

这仍然无法解决您的原始问题... 如果延迟的“DO”比更进一步延迟的“DOG”返回时间还要晚，它仍将使用“DO”的结果。您所做的只是节省了对服务器的调用。 - Patrick

Answer 2

我认为你想在这种情况下使用“防抖”技术？

参见：

• https://docs.angularjs.org/api/ng/directive/ngModelOptions

• http://ilikekillnerds.com/2014/12/increasing-angular-performance-by-debouncing-your-ng-model-updates/

  <input type="text"
     class="form-control" 
     data-ng-model="query" 
     data-ng-change="ctrl.search(query)" 
     placeholder="Search" 
     ng-model-options="{ debounce: { 'default': 500,  'blur': 0 } }"    
  />
  

- house9

---

谢谢！'blur': 0 是什么作用？ - Matias Cicero

我从文档中复制了这段代码，也许在你的情况下不需要。当离开该字段时，它将不会有去抖延迟（因为它是0），如果需要的话，可以根据每个事件类型来微调去抖动。 - house9

Answer 3

像这样：$q.reject(response); 尽管从技术上讲，我认为上面的评论者是正确的，但实际上你是在拒绝承诺，而不是真正地取消它。

- Andrew Cavanagh

---

这不会拒绝我的最终请求吗？如果用户仍在输入，中止请求的逻辑是什么？ - Matias Cicero

我在完全理解你的代码示例之前就回答了，上面的去抖动答案是更好的方法来满足你的需求。 - Andrew Cavanagh