Ajax请求中的async属性(同步请求、异步请求)

版权声明：本文为博主原创文章，转载请注明出处 浅然的专栏 https://blog.csdn.net/w_linux/article/details/81125133

一、场景

写报表的时候，利用ajax将后台json数据返回给前台，但是前台一直拿不到json中的数据，报错提示如下，大概意思就是无法读取itemId这个属性。后来发现是缺少了async：false

具体无法读取的位置如下

//ajaxloding()函数中是ajax获取请求代码
ajaxloding();
//////////////以下chartsdata[a].itemId无法读取//////////////////
for(var i = 0; i < 10; i++){
    v = chartsdata[a].itemId
    lis.push('<li id='+v+'></li>')
    a++;
}
//此处省略部分代码，上述代码与以下代码不在一个函数体内
function ajaxloding(){
    $.ajax({
        type: 'get',
        url: url,//请求数据的地址
        contentType: "application/x-www-form-urlencoded",
        dataType: "json",        //返回数据形式为json
        result:{},
        success: function (result) {
            chartsdata = result;
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });
}

---

二、场景分析

具体测试方法以下步骤

• 1、检查是否进入for循环：测试通过
• 2、检查是否能得到for循环中的值：无法获取
• 3、检查ajax获取数据：无法获取
• 4、检查ajax相关代码：缺少async属性

三、解决方案

通过分析，因为先执行了ajax获取值的函数，所以导致ajaxloding();下的for循环无法读取itemId属性的原因就是ajax没有将值传输过来，所以就是async属性导致的可能性最大，添加async:false，问题解决

四、async属性解释

• 1、async默认值为true，即为异步方式，ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发$.ajax里的success方法，所以之前我默认为true的话，会导致服务器数据还在传输过程中，就执行了for循环，而不是等待它成功返回数据了，再执行for
• 2、async 设置为 false，则所有的请求均为同步请求，在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。也就是说，必须得返回完数据才能执行for

好了，问题解决