2015-11-03 7 views
8

Supponiamo di avere un campo di testo di input (più simile al campo di ricerca di Google) che, una volta modificato, attiverà una richiesta e mostrerà alcuni risultati.AngularJS - Come annullare una promessa?

Per esempio, il tipo

di entrare Dog nell'input:

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. 

Ora, diciamo che la richiesta DO risponde oltre il DOG uno. Il mio modello finirebbe con i risultati , anche se ho digitato DOG.

Per questo, ho bisogno di un modo per annullare o interrompere le richieste in corso correnti se continuo a digitare caratteri. In questo modo, il mio modello è cambiato solo dalla richiesta finale.

il mio ingresso è simile al seguente:

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

Ecco il mio 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; 
    }); 
} 
+0

Non possiamo annullare promise..either abbiamo bisogno di 'reject' o' resolve' per completarlo .. –

+1

1) Usa debounce nella tua casella di testo puoi usare ng-model-options 2) Puoi fornire una promessa alla proprietà di timeout dell'opzione http che è possibile annullarlo (rifiutando tale oggetto posticipato), ma la richiesta verrà comunque elaborata dal server che verrà rifiutata a livello del client. – PSL

+0

Probabilmente sarebbe meglio risolvere questo problema non inviando la richiesta in primo luogo finché non si è verificata una breve pausa nella digitazione. L'annullamento della richiesta non impedirà al server di elaborarlo se lo ha già ricevuto. guarda in https://docs.angularjs.org/api/ng/directive/ngModelOptions in modo speci fi co l'opzione di rimbalzo. –

risposta

4

Solitamente per questo caso la gente usa ng-model-options={debounce: 100}.

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

in ogni caso è possibile rifiutare promessa.

+0

Questo ha fatto il trucco! Grazie mille! È come un ritardo prima di inviare ogni richiesta? –

+0

sì, ti aiuta;) siete i benvenuti. – Errorpro

+0

@MatiasCicero è fondamentalmente un timeout che viene reimpostato ogni volta che il valore cambia. quindi, se il valore smette di cambiare per 100 ms, il timer termina e viene inviata una richiesta. –

0

Ti piace questa: $q.reject(response);

Anche se tecnicamente Credo che quanto sopra commentatore è corretta, In realtà respingiamo la promessa e non la cancelliamo davvero.

+1

Non rifiuterebbe anche la mia richiesta finale? Quale sarebbe la logica per abortire solo una richiesta se l'utente sta ancora digitando? –

+0

Ho risposto prima di cogliere completamente il tuo esempio di codice, la risposta di rimbalzo sopra è un metodo migliore per soddisfare le tue necessità. –

1

Penso che si voglia utilizzare una tecnica debounce in questo caso?

vedi:

+0

Grazie! Cosa fa "sfocare": 0' fare? –

+0

L'ho copiato dai documenti, potrebbe non essere necessario nel tuo caso, quando si esce dal campo non avrebbe il ritardo del debounce (perché è 0), è possibile regolare il debounce in base a ciascun tipo di evento, se lo si desidera – house9