Login
  • 首页
  • 社规
  • 指南
  • 编程
  • 统计
  • 排行
  • 友链
  • 游戏
  • 生活
  • 追番
  • 留言
  • 归档
  • 进程
  • 审核
  • 图床
  • 工具
  • 自动
  • 图标
  • 监控
  • 版本
芋圆社区 > 编程 > JavaScript > jQuery合并ajax请求

jQuery合并ajax请求

62
0
2022-06-14
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:最方便的方法就是让后端改,合并请求laugh

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

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

Message Board

Comment

编程导航

对象转为字符串

call,apply,bind

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

jQuery合并ajax请求

批量命名全局变量

forEach方法

round,ceil,floor

Array方法

Copyright © 2020 芋圆社区

Powered by 浙ICP备2020039309号-1

此页面不支持夜间模式!

已进入夜间模式!

已进入普通模式!

搜索框不允许为空

签到成功!经验+5!芋圆币+2!

签到失败!今日已签到!

需要登录社区账号才可以进入!

复制成功