vue基础 Async/Await（四）

Async/Await#

Promise带来了.then()，让代码变得井然有序，便于管理。于是我们大量使用，代替了原来的回调方式。但是不存在一种方法可以让当前的执行流程阻塞直到promise完成。JS里面，我们无法直接原地等promise完成，唯一可以用于提前计划promise完成后的执行逻辑的方式就是通过then附加回调函数。 现在随着Async/Await的增加，可以让接口按顺序异步获取数据，用更可读，可维护的方式处理回调。

1、Async—声明一个异步函数(async function someName(){...})

自动将常规函数转换成Promise，返回值也是一个Promise对象
只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数
异步函数内部可以使用await

2、Await—暂停异步的功能执行(var result = await someAsyncCall();)

放置在Promise调用之前，await强制其他代码等待，直到Promise完成并返回结果
只能与Promise一起使用，不适用与回调
只能在async函数内部使用

3、使用小贴士：async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。

如何来用呢？我们一起来敲一敲代码吧~

1、async 函数的几种使用形式

Copy Highlighter-hljs
//函数声明
async function foo(){}

//函数表达式
const foo = async function(){}

//对象的方法
let obj = { async foo(){} }
obj.foo().then(()=>{console.log('hello world')});

//箭头函数
const foo = async ()=>{};

//class 的方法
class Storage{
	constructor(){
		this.cachePromise = caches.open('avatars');
	}
	
	async getAvatar(name){
		const cache = await this.cachePromise;
		return cache.match('/avatars/${name}/.jpg')
	}
}

const storage = new Storage();
storage.getAvatar('jake').then(...);

2、await的用法则相对简单了许多，他后面需要是一个Promise对象，如果不是则会被转成Promise对象。只要其中一个如果Promise对象变为reject状态，那么整个async函数都会中断操作。如果状态是resolve，那么他的返回值则会变成then里面的参数，如下。

Copy Highlighter-hljs
async function f(){
	return await 123;
}

f().then(v => console.log(v))
//123

3、使用小贴士

怎样容错呢，犹豫await后面的promise运行结果可能是rejected，最好把await放入try{}catch{}中
Await后的异步操作，如果彼此没有依赖关系最好同时触发，在下面场景一会有介绍
Await只能在async函数之中，如果在普通函数中，会报错

使用场景介绍#

那么什么情况下适合用，什么情况下不适合使用呢？

1、场景一，我们同时发出三个不互相依赖的请求，如果用Async/Await就显得不明智了

Copy Highlighter-hljs
async function getABC(){
	let A = await getValueA(); //getValueA takes 2 second to finish
	let B = await getValueB(); //getValueB takes 4 second to finish
	let C = await getValueC(); //getValueC takes 3 second to finish
	
	return A*B*C;
	
}

如上图所示，上面我们A需要2s，B需要4s，C需要3s，我们如上图所示发请求，就存在彼此依赖的关系，c等b执行完，b等a执行完，从开始到结束需要（2+3+4）9s。

此时我们需要用Promise.all()将异步调用并行执行，而不是一个接一个执行，如下所示：

Copy Highlighter-hljs
async function getABC(){
	let results = await Promise.all([getValue,getValueB,getValueC]);
	
	return results.reduce((total,value)=>total * value);
}

这样将会节省我们不少的时间，从原来的的9s缩减到4s，是不是很开心，耶~

2、场景二，我曾经遇到过一个场景，一个提交表单的页面，里面有姓名、地址等巴拉巴拉的信息，其中有一项是手机验证码，我们不得不等待手机验证码接口通过，才能发出后续的请求操作，这时候接口之间就存在了彼此依赖的关系，Async跟Await就有了用武之地，让异步请求之间可以按顺序执行。

其中不用Async/Await的写法，我们不得不用.then()的方式，在第一个请求验证码的接口有返回值之后，才能执行后续的的Promise，并且还需要一个then输出结果，如下：

Copy Highlighter-hljs
//获取手机验证码的接口请求
const callPromise1 = fetch('//xx.com/api/getCode');
callPromise1.then(response => response.json())
.then(json=>{
	//对验证码的返回值进行后续的操作 比如提交表单等
	const callPromise2 = fetch('//xx.com/api/psotForm');
	return callPromise2;
})
.then(response => response.json())
.then(json => {
	//输出执行完成之后的结果
	console.log(json.respCode);
})
.catch(err=>{console.log(err)});

而用Async/Await的方式去写就是下面这样，我们将逻辑分装在一个async函数里。这样我们就可以直接对promise使用await了，也就规避了写then回调。最后我们调用这个async函数，然后按照普通的方式使用返回的promise。要记得容错呢~~

Copy Highlighter-hljs
//提交表单的请求
async function postForm(){
	try{
		//手机验证码是否通过 拿到返回json
		const response1 = await fetch('//xx.com/api/getCode');
		const json1 = await response1.json();
		
		let json2;
		//对第一个请求的返回数据进行判断，满足条件的话请求第二个接口 并返回数据
		if(json1.respCode === 200){
			const response2 = await fetch('//xx.com/api/postForm');
			json2 = await response2.json();
		}
		return json2;
	}catch(e){
		console.log(e);
	}
}

//执行postForm 
postForm().then((json)=>console.log(json));