Js 理解异步/回调/异步同步化/ async/await
异步函数的理解
关键词:异步,函数名当参数传递,async/await
异步函数:需要时间去处理它,这个时间可能时间比较长,为了使程序能平稳运行,就先跳过这个函数,执行下一步同步函数.
为此,异步函数最好的例子就是人工干预,增加运行时间,没有比setTimout()更好的例子了,以下是简单一个示例代码:
function delay(){
setTimeout( ()=>{
console.log('2S 后执行')
},2000)
}
delay();
console.log('同步优先,异步靠边,回调垫底');
// 输出 同步优先,异步靠边,回调垫底 2S 后执行
异步例子准备好了, 接下来是回调函数,很多教程里写回调都用callback, 刚开始我也不明白这是什么鸟,后来才明白就是一个函数名当参数传递,,还是最简单代码来一个.
function demo( num ,cb){
num=num*2;
return cb(num)
}
function control( number){
console.log( number);
return number
}
demo(100,control);
// 输出 200
函数当参数名的精髓,就是主函数返回一个处理函数
像上面的 demo 就是一个标准的回调函数, 回调函数的好处就是留下接口部分,通过这个接口,可以写出更大的处理公共部分的函数,
function anothercontrol( num){
return num*num;
}
demo(100,anothercontrol)
//传参是为了更多的拓展接口
回调函数还有一种常见写法,直接写匿名函数( function 后面不要名字,简单粗暴);注意:公共部分的参数传递个数要写正确
回调函数解决完,我们在回到异步函数,思考一个问题当异步函数遇到回调函数时执行顺序
还是直接上
function demo(num ,cb){
var r = num+1;
setTimeout(()=>{
var z =r+3
console.log('helllo 2S later r:'+z)},2000);
cb(r);
}
function other(x){
var z =x*x
console.log(x*x)
return z
}
demo(2,other);
先输出9 2S或输出 helllo 2S later r:6
所以 同步优先 异步靠边 ,回调垫底 ,是错误的., 那怎么按顺序执行呢,最简单方法是将回调函数写入异步函数中
function demo(num ,cb){
var r = num+1;
setTimeout(()=>{
var z =r+3
console.log('helllo 2S later r:'+z);
cb(r);
},2000)
}
OK! 不过这种方法不过方便, 如果涉及到超级多的异步函数+回调函数,多层嵌套,恐怕是很头疼的.有一个最新的好方法是使用今天的主角 async/await , 粗暴理解 异步你给我等等.
这两天接触这东西,是因为最近想学KOA ,看了简\书上的一些教程,综合自己的理解写了这个,在这感谢 @白昔月指导,同时借鉴了@mingttong,的一些想法,当中有很多相当不严谨,如有错误,欢迎私信给我
异步函数编写
1 先要有异步的样子 就是async, 在有函数 function ,组合起来 async function(){}, 当然也可以给他取名 async function getvalue(){}; 潮流写法 async ()=>{}, 异步函数中可以没有等待,但等待中一定要先说好, 因为大家时间多恨宝贵.
2 接着是等等 await , 等什么? 等一个函数结果 await function(){}, 综合起来
async function(){
await function()
}; //就是这么简单,当然坑也是无数个,接下来踩坑
代码
async function demoAsync(){
console.log('begin async');
await setTimeout(()=>{
console.log (' await coming ')
},2000);
console.log ('await is end ,now turn me')
}
demoAsync()
出结果 还不是我们想要的 为什么
begin async
Promise { }
> await is end ,now turn me
await coming
原理 异步等待的是一个期许(Promise) ,生活也一样 .正确写法
async function demoAsync(){
console.log('begin async');
await new Promise((resolve, reject)=>{
setTimeout(()=>{
console.log (' await coming ');
resolve('ok');
},2000);
});
console.log ('await is end ,now turn me');
}
demoAsync()
有了 期许 ,总是会有结果.Promise 的结果来自reslove 和 reject 两个参数
上面代码 返回期许的成功结果是一个字符串OK , 我们可以直接拿到 返回结果
var result = await new Promsie............// 这种经常出现在调用数据库异步操作取结果.
封装一下 会比较好看
var result = await a();
接下来如何封装起来 await 等待的是一个期许(Promise)记住这句,我们就返回一个期许给他
function pro() {
return new Promise((resolve, reject)=>{
setTimeout(()=>{
console.log (' await coming ');
resolve('ok');
},2000);
});
};
async function demoAsync(){
console.log('begin async');
await pro();
console.log ('await is end ,now turn me')
}
注意点: Promise 中的 resolve 和 reject 相当于函数中的 return ,只是这个Promise 比较高级, 他能返回两钟状态. 如果 执行到resolve( date ), 等待就直接返回并且附带一个结果.如果有异常该如何获取呢, 交给reject(' wrong'),
格式
try {
var result = await pro();
var result2= await another();
}
catche(err){
console.log(err)
}
就是干脆,错误一致传递给catch(err),再也不用担心异步哪出错了
