vue中使用async和await处理异步javascriptZKY的博客-

写项目经常碰到先进性一个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写在外面会报错。文章开始也提到了