ES5中使用回调函数实现异步操作
同步变成异步方法
在ES5中 我们知道javascript是单线程的,所以所有的操作其实是同步操作,但是为了节省资源和时间,可以将同步的操作变为异步操作,我在做项目时遇到了类似问题(说白了就是调整程序执行的先后顺序【我这里是调整方法执行的先后顺序】)
看代码
//原本执行顺序 获取用户信息===》通过用户id获取用户订单
function getUserInfo(){
//注意这里一般使用的是异步操作来获取用户信息
console.log('使用ajax获取到用户信息【异步操作】')
let user={id:'999'}
return user;
}
//通过用户id获取用户订单信息
function getUserOrder(id){
//注意这里一般使用的是异步操作来获取用户信息
console.log('通过传来的用户id获取到用户订单信息【异步操作】')
let order='获取到用户id:'+id+'的订单信息'
return order;
}
//执行程序
const user=getUserInfo();
const order=getUserOrder(user.id);
//some code ....
真实执行结果:
直接报错,无法获取到订单信息,一般错误信息是没给getUserOrder方法传id,也就是传入的id是undefined
报错原因
是因为ajax是异步请求,会导致程序先执行·getUserOrder(user.id)
再执行getUserInfo()
,,并不是我们所期望的,所以这里改造一下
改造执行顺序
//原本执行顺序 获取用户信息===》通过用户id获取用户订单
function getUserInfo(){
//注意这里一般使用的是异步操作来获取用户信息
console.log('使用ajax获取到用户信息【异步操作】')
let user={id:'999'}
return user;
}
//通过用户id获取用户订单信息
function getUserOrder(id){
//注意这里一般使用的是异步操作来获取用户信息
console.log('通过传来的用户id获取到用户订单信息【异步操作】')
let order='获取到用户id:'+id+'的订单信息'
return order;
}
//执行程序
const user=getUserInfo();
setTimeout(function(){
const order=getUserOrder(user.id);
},300)
//some code ....
现在的执行结果:
获取到用户id:999的订单信息(使我们所期望的)
再看一个小的demo案例
//模拟创建自己的ajax
let ajax = function(callback) {
console.log("开始执行ajax函数");
let param={mongy:1000000000000,unit:'元'};
console.log('获取到需要传入到回调的参数:',param)
setTimeout(function(){
//执行回调函数
callback(param)
},1000);
};
let aa=function(param){
//获取异步数据
console.log('拿到传入回调的结果:',param);
}
ajax(aa)
写的不是很好,程序员干久了,表达能力被程序化,很不好描述~