当两个单独的Ajax调用完成时,调用函数的好方法是什么?

What is a good way to call a function when two separate Ajax calls complete?

本文关键字:调用 完成时 函数 是什么 方法 Ajax 单独 两个      更新时间:2023-09-26

所以我有一些类似于以下简化版本的JS:

var MyAjax = $.ajax({
    url: 'api/myApi',
    type: "POST",
    data: myData,
    dataType: "json",
    success: function (data) {
        if (condition) {
            var weightCounts = $.ajax({
                url: 'api/myApi',
                type: "POST",
                data: myConditionalData,
                dataType: "json",
                success: function (conditionalData) {
                    MyExternalMethod(data, conditionalData)
    }
});

基本上我有两个Ajax调用。我有一个可以检索一些数据,如果启用了额外设置,第二个可以检索一些数据。条件调用嵌套在主调用的成功事件中的原因是因为MyExternalMethod()的参数是由这些调用生成的,因此它们都需要完成。

从概念上讲,这些调用是完全相互独立的,条件调用不需要等待初始调用的成功事件,这是我在编写这段代码时能想到的最好的方法。我想重构它来修复等待第一个请求来执行条件的缓慢,但我不确定最好的方法。

到目前为止,我最好的想法是:

var firstData = null;
var secondData = null;
var MyFirstAjax = $.ajax({
    url: 'api/myApi',
    type: "POST",
    data: myData,
    dataType: "json",
    success: function (data) {
        firstData = data;
        if (secondData){
            MyExternalMethod(firstData, secondData)
        }
});
var MySecondAjax = $.ajax({
    url: 'api/myApi',
    type: "POST",
    data: myData,
    dataType: "json",
    success: function (data) {
        secondData = data;
        if (firstData){
            MyExternalMethod(firstData, secondData)
        }
});

除了使用这些变量作为标志之外,还有其他标准的方法吗?我已经习惯了在JS的工作中随心所欲,但我想写更干净,更面向标准的代码,所以我想知道是否有比上面更有利的方法(或者上面有任何我没有看到的主要缺点)。

谢谢

您可以使用$.when()

var MyFirstAjax = $.ajax({
    url: 'api/myApi',
    type: "POST",
    data: myData,
    dataType: "json"
});
var MySecondAjax = $.ajax({
    url: 'api/myApi',
    type: "POST",
    data: myData,
    dataType: "json"
});
$.when(MyFirstAjax, MySecondAjax).then(function (firstResult, secondResult) {
    var firstData = firstResult[0];
    var secondData = secondResult[0];
    MyExternalMethod(firstData, secondData)
});

简短的回答:像async.js这样的库会有所帮助。

长回答:有几种方法可以处理这个问题。

基本上两个ajax都需要触发相同的回调,比如success:上的function check_ajax(),检查firstDatafirstData是否可用。如果是,调用MyExternalMethod

一个很好的参考:http://book.mixu.net/node/ch7.html