ES7中的异步async和异步等待await

异步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精简了好多，而且通俗易懂，三行就搞定了！！

ES7中的异步async和异步等待await

猜你喜欢