AngularJS - 如何取消承諾？

比方說，我有一個輸入文本字段（更像谷歌搜索字段），當發生更改時，會觸發請求並顯示一些結果。AngularJS - 如何取消承諾？

例如，

讓我們在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; 
    }); 
}

來源

2015-11-03 Matias Cicero

我們無法取消promise..either我們需要'reject'或'resolve'它來完成它.. –

1）在你的文本框中使用debounce你可以使用ng-model-options 2）你可以提供http選項的timeout屬性您可以取消它（通過拒絕延遲對象），但請求仍然由服務器處理，它將在客戶端級別被拒絕。 – PSL

通過不首先發送請求，直到發生短暫停頓，解決此問題可能會更好。如果已經收到請求，則取消該請求將不會阻止服務器處理該請求。請特別注意https://docs.angularjs.org/api/ng/directive/ngModelOptions去抖選項。 –

通常這種情況下人們使用ng-model-options={debounce: 100}。

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

反正你可以拒絕承諾。

來源

2015-11-03 18:56:10 Errorpro

這個伎倆！非常感謝你！發送每個請求之前是否像延遲一樣？ –

是的，它可以幫助你;）不客氣。 – Errorpro

@MatiasCicero它基本上是一個超時值，每次值改變時都會被重置。所以，如果該值停止變化100ms，則定時器結束併發送請求。 –

像這樣：$q.reject(response);

雖然技術上我認爲，上述評論者是正確的，你實際上是拒絕承諾，並沒有真正取消承諾。

來源

2015-11-03 18:50:32

也不會拒絕我的最終要求嗎？如果用戶仍然在打字，只有中止請求的邏輯是什麼？ –

在我充分研究你的代碼示例之前，我回答了上面的去抖動答案，它是解決你的需要的更好方法。 –

我想你想在這種情況下使用debounce技術？

見：

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 } }"  
/>

來源

2015-11-03 18:59:10 house9

謝謝！什麼是「模糊」：0'做什麼？ –

我從文檔中複製了它，可能在您的情況下不需要，當離開字段時它不會有去抖延遲（因爲它是0），如果需要，您可以根據每種事件類型微調去抖動 – house9

AngularJS - 如何取消承諾？

回答

相關問題