vue中使用async和await处理异步

写项目经常碰到先进性一个axios请求，然后在进行下一个axios请求，但是此次的请求需要，用到上一次请求返回来的参数，因为axios是异步的，所以可以axios请求嵌套获取，但当数据多的时候，页面会非常的乱，此时就需要用到async和await的使用，使上述情况就好像写同步代码一样，请看例子
这是两个axios请求的函数

//第一个
function axiosOne(){
returen axios.get(url)
};
var dataOne = {  //这里dataOne假如是 axiosOne请求回来的数据
        msg:"成功"
        code：0
 }
//第二个
function axiosTwo(params){
returen axios.get(url,{params})
 }
var dataTwo = [    //这里dataTwo 假如是 axiosTwo请求回来的数据
 {  
     name:"朱康宇"
     age：23 
 }
]

我们第二个请求获取列表的时候需要使用第一个请求得到的code值，当做参数传进去，那么我们看一下常规的做法吧

function data() {
	dataOne().then(res => {
		//这里是成功请求了axiosOne返回一个dataOne 的JSON对象
		//在这之后再去请求axiosTwo
		let params = res.code
		axiosTwo(params).then(res => {
		//这里返回的就是axiosTwo返回一个dataTwo 的JSON对象
		//这是最原生的写法 ，一旦数据过多，代码就变得不清晰
		})
	})
}
data();

下面我们用es6中新的特性 asyns和await来写，注意：await的使用需要在asyns的函数内部去使用否则会报错

async function data() {
	let codes = await axiosOne(); //这里的codes 就是请求axiosOne的返回JSON对象也就是dataOne
	let params = codes.code
	let lists = await axiosTwo(); //这里的lists 就是请求axiosTwo的返回JSON对象也就是dataTwo
}
data()  
//这样写是不是就简单多了，即使数据多，代码也很清晰

当然还剩最后一点，处理异常，可以加上try catch

async function data() {
   try{
	let codes = await axiosOne(); //这里的codes 就是请求axiosOne的返回JSON对象也就是dataOne
	let params = codes.code
	let lists = await axiosTwo(); //这里的lists 就是请求axiosTwo的返回JSON对象也就是dataTwo
	}catch(err){
	console.log(err);
   }
}

做vue项目的时候，如果对于异常没有特殊处理，可以不加try catch
在这里简单解释一下为什么这样写，异步的请求，变成了同步的代码

首先在函数面前声明一个async 说明这个函数是一个异步函数
带async关键字的函数，它使得你函数的返回值必定是promise对象
当走到函数前边带有声明的await函数时，await会等待右侧表达式的结果，也就是说，右侧如果是函数，name函数的return值就是—表达式的结果；右侧如果是一个’hello’或者什么值，那表达式的结果就是’hello’
这里注意，一般await关键字要在async关键字函数的内部，await写在外面会报错。文章开始也提到了

vue中使用async和await处理异步

猜你喜欢