jQuery合并ajax请求

芋圆社区 > 编程 > JavaScript > jQuery合并ajax请求

2022-06-14

Hey、小怪兽

• 以下都是jQuery的ajax请求
• 在开发的时候会遇到一个方法发起多个ajax请求的情况，可以用最简单的写法，直接写3个ajax：

function getData() {
    $.ajax({
        url: "/address1",
        type: "GET",
        dataType: "json",
        success: function (data1) {
            console.log(data1);
        },
    });

    $.ajax({
        url: "/address2",
        type: "GET",
        dataType: "json",
        success: function (data2) {
            console.log(data2);
        },
    });

    $.ajax({
        url: "/address3",
        type: "GET",
        dataType: "json",
        success: function (data3) {
            console.log(data3);
        },
    });
}

getData();

• 这样看起来很长，我们可以用jQuery的when方法简写一下：

function getData() {
    let fun1 = $.ajax({ url: "/address1", type: "GET", dataType: "json" }),
        fun2 = $.ajax({ url: "/address2", type: "GET", dataType: "json" }),
        fun3 = $.ajax({ url: "/address3", type: "GET", dataType: "json" });

    $.when(fun1, fun2, fun3).then(
        function (data1, data2, data3) {
            // 成功回调，所有请求正确返回时调用
        },
        function () {
            // 失败回调，任意一个请求失败时返回
        }
    );
}

getData();

• 就直接请求了3个地址（红色的原因是这个地址乱写的，不要在意）
• 但有的时候，我们不希望全部请求，如果地址1不成功那地址2345就不请求了，例如地址1是获取用户的权限，地址2需要根据地址1的权限判断是否返回，地址1没有获取到用户权限，地址2也不需要请求了

function getData() {
    $.ajax({
        url: "/address1",
        type: "GET",
        dataType: "json",
        success: function (data1) {
            $.ajax({
                url: "/address2",
                type: "GET",
                dataType: "json",
                success: function (data2) {
                    $.ajax({
                        url: "/address3",
                        type: "GET",
                        dataType: "json",
                        success: function (data3) {
                            // 当地址123都成功才会执行
                        },
                    });
                },
            });
        },
    });
}

getData();

• 可以看到我们只请求了地址1，只有地址1成功返回了才会执行地址23，不像前面的方法无论如何都会发起三个请求
• PS：最方便的方法就是让后端改，合并请求

上一篇：获取数组中对象的某一属性值

下一篇：批量命名全局变量

jQuery合并ajax请求

Message Board

Comment