了解 JavaScript ES7 的 async await

360 阅读3分钟

----欢迎查看我的博客----

async/await

  最近公司面试,发现有个别的朋友搞不明白 async , await ,甚至以为这个东西是 es6 的,虽然它和 es6 的 promise 确实有血缘关系,但这个东西确实是 es7 的。好了,废话不多说,让我们今天彻底看看这个玩意是什么吧。

async

  async 其实字面好理解 异步,await从字面意思也好理解,等待。所以看出来他们相辅相成,所以 await 只能出现在 async 函数中。 让我们来写段代码看看

async function asyncTest(){
	return 'hello';
};

console.log(asyncTest()); //Promise {<resolved>: "hello"}

  我们看出来async返回的是一个 promise 对象,不太熟悉 promise 对象的童鞋,请看 上一篇文章 ,那既然是个promise对象,我们的所有promise的方法是不是可以调用了。让我来看一下。

async function test(){
	return '我被触发了';
};

test().then((val)=>{ console.log(val) }) //我被触发了

竟然他return一个值那,又是promise对象,那我们是不是可以理解为就是 promise.resolve() 呢,让我们来改写一下:

	const promise = new Promise((resolve)=>{
		resolve('我被触发了')
	});
	promise.then((val)=>{
		console.log(val) //我被触发了。
	});

好的,没毛病。** 在没有 await 的情况下执行 async 函数,它会立即执行,返回一个 Promise 对象,并且,绝不会阻塞后面的语句。这和普通返回 Promise 对象的函数没区别 **

await

  好了我们。大概知道了 async 的写法,那么我们来看看 await 。之前说到 await 只能出现在 async 的方法中,那我们来看看不出现会怎么样?

	function test(){
		return 1
	};
	
	function result(){
		const val = await test()
		console.log(val) //await is only valid in async function
	}
	result();

很明显报错了。再次验证 await 只能用在 async 的方法中。 改:

	function test(){
		return 1
	};
	
	async function result(){
		const val = await test()
		console.log(val) //1
	}
	result();

我们在来做些改变:

	function test(){
		return Promise.resolve(1)
	};
	
	async function result(){
		const val = await test()
		console.log(val) //1
	}
	result();

看来我们await调用外部的promise也没问题,结合之前的,我们是不是可以这样写:

	async function test(){
		return 1
	};
	async function result (){
		const val = await test();
		console.log(val) //1
	}
	result()

两者结合

  我们已经在上面引出了两者结合,但是anysc顾名思义,异步,好我们看看两者结合怎么来处理异步问题吧。

	function test(){
	 	return new Promise((resolve)=>{
			setTimeout(()=>{
				resolve('我出来了')
			},1000)
		})
	};
	
	async function result(){
		const val = await test();
		console.log(val) //我出来了
	};
	result();

我们可以看出,test返回一个promise的对象,然后result里的await拿到了这个值。我们看看如果用.then怎么写吧

	function test(){
		return new Promise((resolve)=>{
			setTimeout(()=>{
				resolve('我出来了')
			},1000)
		})
	}
	
	test().then((val)=>{
		console.log(val) //我出来了
	})

那既然.then可以解决问题那么问啥要用async和await呢?原因很简单,多个链式调用。 例如我们有这样的需求:

	function test1(val){
		return new Promise((resolve)=>{
			setTimeout(()=>{
				resolve(val + 1)
			},1000)
		})
	}
	function test2(val){
		return new Promise((resolve)=>{
			setTimeout(()=>{
				resolve(val + 1)
			},1000)
		})
	}
	function test3(val){
		return new Promise((resolve)=>{
			setTimeout(()=>{
				resolve(val + 1)
			},1000)
		})
	}
	
	function doit(){
		test1(1)
		.then((v)=>test2(v))
		.then((v)=>test3(v))
		.then((v)=>{console.log(v)}) //4
	}
	doit()

.then.then.then看着繁琐且不易维护。我们来看看用新武器怎么解决的吧

	function test1(val){
		return new Promise((resolve)=>{
			setTimeout(()=>{
				resolve(val + 1)
			},1000)
		})
	}
	function test2(val){
		return new Promise((resolve)=>{
			setTimeout(()=>{
				resolve(val + 1)
			},1000)
		})
	}
	function test3(val){
		return new Promise((resolve)=>{
			setTimeout(()=>{
				resolve(val + 1)
			},1000)
		})
	}
	
	async function doit(){
		const v1 = await test1(1);
		const v2 = await test2(v1);
		const v3 = await test2(v2);
		console.log(v3) //4
	}
	
	doit();
	

是不是更加灵活了?数据的解耦非常舒服,所以一个东西得诞生一定有原因的。

结语

关于 async , await 暂时说到这里。困了,好累啊。。。睡了晚安各位