Synchrone JQuery-Aufruf an Web-API

Question

Ich habe eine harte Zeit, meinen Kopf um JQuery Versprechungen und verzögerte Objekte wickeln so bitte bitte mit mir. Ich sollte auch sagen, dass meine Anwendung React, Typescript und ES6 verwendet.

Lassen Sie sich sagen, ich habe ein Array von Objekten:

[{ Object }, { Object}, { Object }] 

Was ich versuche für jedes Objekt im Array zu tun ist, einen Anruf mit einem anderen Parameter an eine API macht aus dem Objekt , rufen Sie die Antwort ab und führen Sie dann für die verbleibenden Objekte erneut einen Aufruf an dieselbe API aus. Im Grunde möchte ich diese Anrufe zusammenketten, damit ich eins nach dem anderen mache und sie dann in meinen Bewerbungsstatus einfüge.

Hier ist, was ich bisher habe, aber es ist offensichtlich nicht funktioniert:

private getData(options: any[]): void { 
    let promises: any[] = []; 

    options.map((option: any, key: number) => { 
     let deferred: JQueryDeferred<any> = $.Deferred(); 
     deferred.done((response) => { 
      return this.getIndividual(option) 
       .done(response => { 
        console.log('done', response); 
       }); 
     }); 

     promises.push(deferred); 
    }); 

    $.when.apply($, promises) 
     .then((response) => { 
      console.log('response', response); 
     }).fail((error) => { 
      console.log("Ajax failed"); 
     }) 
     .done(() => { 
      console.log('done'); 
     }); 
} 

private getIndividual(option: any) { 
    return apiCall(option.hashKey); 
} 

Answer 1

Wenn Sie Ihre Anrufe nicht voneinander abhängig sind, und Sie müssen nur auf sie alle Versprechen einmal handeln abgeschlossen ist, verwendet Promise.all:

var xhr1 = doXhrPromise(1); 
var xhr2 = doXhrPromise(2); 
var xhr3 = doXhrPromise(3); 
var xhr4 = doXhrPromise(4); 

Promise.all([xhr1, xhr2, xhr3, xhr4]).then(() => { 
    // do something once all the promises resolve 
}); 

Wenn Sie die Anrufe in Folge tun müssen, weil der nächste Anruf auf Daten aus dem vorherigen Aufruf beruht, dann ist die Kette sie nur zusammen etwa so:

doXhrPromise(1) 
.then((data) => { return doXhrPromise(data.nextId); }) 
.then((data) => { return doXhrPromise(data.nextId); }) 
.then((data) => { return doXhrPromise(data.nextId); }) 
.then((data) => { return doXhrPromise(data.nextId); })