多个 Ajax 调用 - 将值从一个传递到下一个答案

【问题标题】：Multiple Ajax Call - Passing Value From One To Next多个 Ajax 调用 - 将值从一个传递到下一个
【发布时间】：2016-08-12 22:50:39
【问题描述】：

我需要进行多次 AJAX 调用，每一次都返回下一次需要的值。我知道 AJAX 不一定像这样工作，因为它是异步的。

我已经阅读了有关回调、承诺、异步实用程序以及在 AJAX 调用中使用 Success 的信息，只是不知道该怎么做。

基本上，我必须对数据库进行大约 8 次不同的调用，并且正在使用 JQuery/AJAX 进行调用。

完成此任务的最佳/正确方法是什么？

【问题讨论】：

这完全取决于你在做什么？发送什么数据，接收什么数据，下一次调用需要什么数据，所有调用是否使用相同的 URL 等等。

标签： jquery ajax asynchronous promise

【解决方案1】：

我认为最容易理解的方法是将每个调用放在唯一的函数中，并在成功回调中调用每个函数。 Promise 可能更优雅，但更难理解。所以是这样的：

call1(1);

function call1(valueNeeded){
    $.get(url,function(data){
        call2(data);
    });
}
function call2(valueNeeded){
    $.get(url,function(data){
        call3(data);
    });
}
function call3(valueNeeded){
    $.get(url,function(data){
        //Finished
    });
}

我不认为这是“最好”的方法，但它非常简单。调用你的函数，当 ajax 完成时，你从成功回调中触发下一个函数。当调用完成成功时调用成功回调。

【讨论】：

【解决方案2】：

如果您想发送两个或多个必须全部完成才能继续的请求，那么您可以使用$.when 方法。它会等到所有请求都完成后再运行.done 回调。

$.when(
    $.get("/user/123"),
    $.get("/user/123/profile")
) .done(function (user, profile) {
    console.log("Hello " + user.name + " (" + profile.email + ")");
});

如果一个请求依赖于先前的请求，那么您可以使用.then 方法：

$.get("/user/123").then(function (user) {
    var deferred = $.Deferred();
    $.get("/profile/" + user.profile_id).done(function (profile) {
        deferred.resolve(user, profile);
    });
    return deferred;
}).done(function (user, profile) {
    console.log("Hello " + user.name + " (" + profile.email + ")");
});

【讨论】：

这可能是一个更好的答案，因为它更深入地探讨了 Javascript 可以通过链接为您做什么，如果不是让初学者更难看到和消化的话。