javascript - 对 Web API 的同步 JQuery 调用

Question

我很难理解 JQuery promises 和延迟对象，所以请多多包涵。我还应该说我的应用程序使用的是 React、Typescript 和 ES6。

假设我有一个对象数组:

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

我想要做的是，对于数组中的每个对象，使用与对象不同的参数调用 API，获取响应，然后对剩余的对象再次调用相同的 API对象。基本上，我想将这些调用链接在一起，因此我一次调用一个，然后将它们添加到我的应用程序状态中。

这是我到目前为止所得到的，但显然，它不起作用:

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

如果您的调用彼此不依赖，并且您只需要在所有 promise 完成后对它们采取行动，请使用 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
});

如果您需要按顺序执行调用，因为下一个调用依赖于上一个调用的数据，那么只需将它们链接在一起，如下所示:

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); })