对 Web API 的同步 JQuery 调用答案

【问题标题】：Synchronous JQuery call to web API对 Web API 的同步 JQuery 调用
【发布时间】：2017-07-15 00:13:39
【问题描述】：

我很难理解 JQuery 承诺和延迟对象，所以请多多包涵。我还应该说我的应用程序正在使用 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);
}

【问题讨论】：

你读过this canonical QA吗？
使用options.map 并有效地丢弃结果是没有意义的
Resolve promises one after another (i.e. in sequence)?的可能重复
我以前没见过，所以谢谢。我知道这不是依赖同步调用的最佳选择。然而，这个应用程序是如何构建的，当组件加载时，它需要多次调用才能从其他服务加载数据。由于我不想让服务器超载调用，我认为这是最好的解决方案。
是否要在队列中调用 API？或者您只想调用数组中的每个对象？

标签： javascript jquery ajax typescript promise

【解决方案1】：

如果您的调用不相互依赖，并且您只需要在所有承诺完成后对其采取行动，请使用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); })

【讨论】：