转载请注明出处：https://oldnoop.tech/c/109.html

如何理解ajax异步请求

$.ajax的async属性默认是true, 表示ajax请求是异步的, 

即$.ajax({});下面的代码会立即执行，不会等待$.ajax请求得到服务器响应之后(即{}中的success回调函数)再执行.

例子:下面的代码,使用同步请求,time2先弹出,time1后弹出,本地js代码执行要比网络请求要快

$.ajax({                                

url:"testasync.jsp",

type:'post',

dataType:'json',  

data:{},

success:function(resp){ //http请求发送成功

 alert("time1:"+new Date());

},                                  

error:function(){   //http请求发送失败

alert("error");                                

}                                   

});

alert("time2:"+new Date());

 

如果想同步执行,将async改为false.

例子:下面的代码,使用同步请求,time1先弹出,time2后弹出,

因为是ajax设置为同步,会等待服务端相应结果,这时候先执行 回调函数success中的代码，再执行$.ajax({});后面的代码

$.ajax({                                

url:"testasync.jsp",

type:'post',

async:false,

dataType:'json',  

data:{},

success:function(resp){ //http请求发送成功

 alert("time1:"+new Date());

},                                  

error:function(){   //http请求发送失败

alert("error");                                

}                                   

});

alert("time2:"+new Date());

 

ajax异步请求编程陷阱

经常发生在 封装一些js函数的时候，在封装的通用js函数中，

 

1.在函数使用ajax请求数据,忽略了ajax异步的情况下 ajax函数后的代码先执行

例如下面的函数，

意图为封装一个通用的js函数 通过 省id数据 拿到 该省的所有城市数据，

但是$.get是异步ajax请求方式，

2处的代码 会先于1处的代码执行，所以最终调用这个函数getCities(3处的diamante)得到的结果为空数组[]

function getCities(provinceId){

 var cities=[];

 $.get('${ctx}/cities/list',{provinceId:provinceId},function(res){

    for( var i in res){

     cities.push(res[i]);//代码1

   }

 });

return cities;//代码2

}

var cities = getCities(1);//代码3,cities变量为空数组[]

 

2.在回调函数中使用return 返回数据

例如下面的代码，是经常语法混淆的地方，

function(res){}这个代码块整体作为$.get的一个参数

在这个代码块中 return res;的代码,只是function(res){}这个函数的返回结果，

而不是getCities函数的返回结果，这个时候getCities函数并没有数据

function getCities(provinceId){

 $.get('${ctx}/cities/list',{provinceId:provinceId},function(res){

   return res;

 });

}