Frage jQuery Deferred: $ .when () mit mehreren Objekten


Ich brauche eine Methode, um verschiedene Skripte mit einem Callback zu holen. Diese Methode funktioniert in Ordnung:

fetchScripts:function() {
    var _this=this;
    $.when(
        $.ajax({
            url:_this.url + 'library/script-one.js',
            type:'get',
            cache:true
        }),
        $.ajax({
            url:_this.url + 'library/script-two.js',
            type:'get',
            cache:true
        }),
        { .... },
        $.ajax({
            url:_this.url + 'library/script-n.js',
            type:'get',
            cache:true
        })
    ).then(function() {
        console.log('fetch is done');

    })
},

Aber ich möchte die Methode verallgemeinern, weil die Redundanz zunimmt. Ist es möglich, ein Versprechen an $ .when () zu übergeben? Unter meinem ersten Versuch - aber URL ist immer das gleiche, d. H. "Script-n.js" Vielleicht habe ich den Punkt verpasst und du könntest eine "Schönheits" -Lösung darstellen

fetchScripts:function() {
    this.deferred=new $.Deferred();
    this.promise=this.deferred.promise();
    var _this=this;
    $.each([
        'script-one.js',
        'script-two.js',
        ( .... ),
        'script-n.js'
    ],function() {
        _this.script=this;
        _this.promise.then(function(){
            return $.ajax({
                url:_this.url + 'library/' + _this.script,
                type:'get',
                cache:true
            })
        });
    });
    $.when(
        this.promise
    ).then(function() {
        console.log('fetch is done');

    });
    this.deferred.resolve();
},

7
2017-07-11 13:54


Ursprung


Antworten:


Sie brauchen immer noch $ .when. Aber stattdessen, erstellen Sie ein Array von Deferreds (oder Versprechen) und dann sich bewerben es zu $ ​​.when:

fetchScripts:function() {
    var base = this.url;
    var defaults = {
        type:'get',
        cache:true
    };

    var libraries = [
        'library/script-one.js',
        'library/script-two.js',
        'library/script-n.js'
    ];

    var deferreds = $.map(libraries, function(current) {
        var ajaxOptions = $.extend({ url:  base + current }, defaults);
        return $.ajax(ajaxOptions);
    });

    $.when.apply($, deferreds).then(function() {
        console.log('All done');
    });
}

Alternativ zur Erweiterung der Standardeinstellungen könntest du auch einfach verwenden $ .ajax (Standard).


27
2017-07-11 14:00



Versuchen

fetchScripts: function() {
    var deferred = new $.Deferred();
    var _this=this;

    var promises = $.map([
        'script-one.js',
        'script-two.js',
        ( .... ),
        'script-n.js'
    ], function(item, idx) {
        return $.ajax({
            url:_this.url + 'library/' + item.script,
            type:'get',
            cache:true
        })
    });

    $.when.apply($, promises).then(function() {
        console.log('fetch is done');
        deferred.resolve()
    });
    return deferred.promise();
}

4
2017-07-11 14:01