多个ajax请求的同步异步问题分析

【前言】

  最近做番茄的项目，在一个ajax执行前，需要判断另一个ajax的执行情况，如果第一个执行成功，让第二个执行。当时运行的时候发现，这2个ajax，同时执行。这就不能满足我的需求了，于是了解了一下ajax的同步异步问题，顺利解决了我的疑惑

【分析同步、异步】

同步：当请求发出后，浏览器什么都不能做，必须得等到请求完成返回数据之后，才执行后续的代码。

  生活中例子：比如你烤面包，把面包放进烤箱里边，然后你就在那里傻等着，一直等到面包烤好了，你取出面包，然后在开始做下面的事情。

异步：当请求发出后，浏览器可以继续执行下面的事情，不必一直等待这个事情执行完在执行其他的。

  生活中例子：比如你烤面包，把面包放进烤箱里边，然后你去做其他的事情了，当烤箱响铃提示你烤好了，你取出面包，再开始做下面的事情

【代码解析】

一、改为同步后的方法（其中一个方法设置为异步）

function addLabel() {
    //获得输入框的内容
    var labelText = document.getElementById("labelText").value.trim();
    var result1 = selectLabel(labelText);//调用另一个方法
    if (result1 == "yes") {
        $.ajax({
            type: "post",
            url: "/Label/InsertLabel",
            data: "labeltext=" + labelText,
            dataType: "json",
            success: function (data) {
                if (data == "1") {
                    alert("注册成功！");     
                }
                else {
                    alert("注册失败，请重新注册！");
                    return;
                }
            },
            error: function (data) {
                alert("系统出错了，请联系管理员！");
            }

        })
    }
    else {
        return;
    }
    
}

function selectLabel(a) {
    //获得输入框的内容
    //var labelText = document.getElementById("labelText").value.trim();
    //判空
    var test = null;
    if (a == "") {
        alert("请输入标签名称");
        test ="no";
    }

    $.ajax({
        type: "post",
        url: "/Label/SelectLabel",
        async:false,//设置同步、异步的参数【false同步、true异步】
        dataType: "json",
        data: "labeltext=" + a,
        success: function (data) {
            if (data.length != 0) {
                alert("重复标签");
 
                test = "no";
            } else {
                test = "yes";
            }
        },
        error: function (data) {
            alert("系统出错了，请联系管理员！");
            test = "no";
        }
    })
    return test;
}

二、在一个ajax返回的数据中，调用另一个ajax方法（这里面的方法都为异步也可以）

function selectLabel() {
    $.ajax({
        type: "post",
        url: "/Label/SelectLabel",
        //async:false,//设置同步、异步的参数【false同步、true异步】
        dataType: "json",
        data: "labeltext=" + a,
        success: function (data) {
            if (data.length != 0) {
                function();//在这里调用零一个方法
        },
        error: function (data) {
            alert("系统出错了，请联系管理员！");
            test = "no";
        }
    })
    return test;
}

【总结】

  设置同步异步：async:true异步，false同步

  很多东西，知道原理之后就变得简单很多。