异步async和异步等待await是什么?
异步async做为一个程序猿大家一般都接触过,知道是什么意思。而在这里async主要是用于申请一个function函数是异步的!
异步等待await是 async wait 的简写,await 只能出现在 async 函数中,一定要注意不能直接调用。因为await会造成程序阻塞,浪费资源!
下面举例给大家说明一下:
比方说我们要吃外卖,而外卖在楼下,同步进行的话,是我们先下去拿回外卖,再吃上外卖!而我们现在异步进行,要想吃上外卖,要找一个人下去拿外卖,而我们这一时间,只能在这等外卖拿回来,才能吃上,所以就要用await异步等待,而在下去拿这个过程中,我们做其他的事是不影响的,所以是异步进行的。下面上代码:
先看一下async异步的函数返回的是什么?
async function waimai(){
return "吃上外卖"
}
var result = waimai();
console.log(result);
上图是我们输出的值,从图中我们可以知道,async是用promise构造出来的!返回的是一个promise表达式!这样我们就可以用.then来输出一下结果试一下!
async function waimai(){
return "吃上外卖"
}
waimai().then(function(result){
console.log(result);
});
果然是可以用.then输出的,不过这样写的话就太麻烦了,比直接用promise简单不了多少!
下面我们看一下await异步等待是怎么用的,前面说过了await必须要在异步函数里面进行,所以await必须放在async function里面!
async function waimai(){
return "吃上外卖"
}
async function show(){
var result = await waimai();
console.log("正在等待");
console.log(result);
}
show();
从输出的结果我们可以看出waimai这个函数,在等待完以后,把值赋给了result 然后再输出的!也是可以输出的,比用.then方便了很多!
以上就是async和await的用法,说的可能还是比较粗糙,大家可能不太明白!
下面我再给大家举一个案例,和promise对比使用,这样能突出这个方法要比promise好很多!
Promise的代码:
/**
* 传入参数 n,表示这个函数执行的时间(毫秒)
* 执行的结果是 n + 200,这个值将用于下一步骤
*/
function takeLongTime(n) {
return new Promise(function(resolve){
setTimeout(function(){
resolve(n + 200);
}, n);
});
}
function step1(n) {
console.log(`step1 with ${n}`);
return takeLongTime(n);
}
function step2(n) {
console.log(`step2 with ${n}`);
return takeLongTime(n);
}
function step3(n) {
console.log(`step3 with ${n}`);
return takeLongTime(n);
}
//以上都一样 下面这里面promise的代码
function doIt(){
console.time("doIt");//开始计算程序运行时间
var startTime = 300;
step1(startTime)
.then(function(time2){
return step2(time2);
})
.then(function(time3){
return step3(time3)
})
.then(function(result){
console.timeEnd("doIt");//结束计算程序运行时间
})
}
doIt();//输出结果
上图是输出的结果是15秒!
async和await的代码:
/**
* 传入参数 n,表示这个函数执行的时间(毫秒)
* 执行的结果是 n + 200,这个值将用于下一步骤
*/
function takeLongTime(n) {
return new Promise(function(resolve){
setTimeout(function(){
resolve(n + 200);
}, n);
});
}
function step1(n) {
console.log(`step1 with ${n}`);
return takeLongTime(n);
}
function step2(n) {
console.log(`step2 with ${n}`);
return takeLongTime(n);
}
function step3(n) {
console.log(`step3 with ${n}`);
return takeLongTime(n);
}
//以上都一样 下面这里面async的代码
async function doIt(){
console.time("doIt");//开始计算程序运行时间
var startTime = 300;
var time2 = await step1(startTime)
var time3 = await step2(time2);
await step3(time3)
console.timeEnd("doIt");//结束计算程序运行时间
}
doIt();//输出结果
结果是一样的都是15秒,中间可能程序运行会有点误差
而async的代码相比promise精简了好多,而且通俗易懂,三行就搞定了!!