🥇 Usando $ promessas de forma eficiente em $ ajax

Os adiamentos e promessas do jQuery já existem há algum tempo, mas ainda é muito comum encontrar projetos onde eles poderiam muito bem ser usados para tornar o código um pouco mais organizado.

Digamos que desejamos uma maneira bonita de fazer solicitações a uma API.
Você simplesmente deseja chamar algo como:

myApp.searchFor('grumpy cat');

… e ter os resultados retornados imediatamente, ou ser capaz de facilmente anexar vários retornos de chamada a isso sem bagunçar o código.

Usando o padrão de módulo, podemos fazer as solicitações de maneira muito organizada e semântica.

var app = {

    // Base URL, if there's any
    getUrl: function (string) {
        return 'http://url-to-api/search/' + string;
    },

    // Build an object of requests.
    // Here's one for a search, which
    // takes only a query value.

    buildRequests: function () {
        this._api = {
            search: function (query) {
                // Creating a deferred
                var deff = $.Deferred();

                $.ajax({
                    url:     this.getUrl(query),
                    success: deff.resolve,
                    fail:    deff.reject
                });

                // We'll work with the outcome
                // of this promise!
                return deff.promise();
            }.bind(this)
        };
    }

    // We perform the search request,
    // and check the state of the request.
    // We can attach multiple callbacks.

    searchRequest: function (query) {
        this._api.search(query)
                 .done(function (data) {
                    console.log('Got data!');
                    return data;
                 })
                 .done(function (data) {
                    console.log('We can attach another callback');
                 })
                 .fail(function (data) {
                    console.log('Failure');
                 })
    }
};

// And we use it like this:
app.buildRequests();
app.searchRequest('cute kittens');

Observe que você pode anexar vários retornos de chamada às promessas devolvidas.
Você pode ouvir done () , fail () e então () ; este último sempre será executado, mesmo se a solicitação falhar.

Você pode aprender mais sobre adiamentos, incluindo o método pipe () muito útil , aqui: http://joseoncode.com/2011/09/26/a-walkthrough-jquery-deferred-and-promise/

Related Posts