JS基于ES6新特性async await进行异步处理操作示例
作者：前端林三哥
本文实例讲述了JS基于ES6新特性async await进行异步处理操作。分享给大家供大家参考，具体如下：
我们往往在项目中会遇到这样的业务需求，就是首先先进行一个ajax请求，然后再进行下一个ajax请求，而下一个请求需要使用上一个请求得到的数据，请求少了还好说，如果多了，就要一层一层的嵌套，就好像有点callback的写法了，那是相当恶心的，下面我就来讲一下如何使用ES6的新特性async await进行异步处理，使上述情况就好像写同步代码一样，首先我们先举个例子：
先写上json文件:
code.json:
{
"code":0,
"msg":"成功"
}
person.json:
{
"code":0,
"list":[
{
"id":1,
"name":"唐僧"
},
{
"id":2,
"name":"孙悟空"
},
{
"id":3,
"name":"猪八戒"
},
{
"id":4,
"name":"沙僧"
}
]
}
比如我们有两个请求，如下，这里用的axios：
function getCode(){
return axios.get('json/code.json');
}
function getlist(params){
return axios.get('json/person.json',{params})
}
我们第二个请求获取列表的时候需要使用第一个请求得到的code值，只有code值为0时，才能请求，而且当做参数传进去，那么我们看一下常规的做法吧
function getFinal(){
console.log("我是getFinal函数")
getCode().then(function(res){
if(res.data.code == 0){
console.log(res.data.code);
var params = {
code:res.data.code
}
getlist(params).then(function(res){
if(res.data.code == 0){
console.log(res.data.list);
}
})
}
})
}
getFinal();
看结果
虽然结果出来了，可是这种写法真的挺难受的，下面来一个async await的写法
async function getResult(){
console.log("我是getResult函数")
let code = await getCode();
console.log(code.data.code);
if(code.data.code == 0){
var params = {
code:code.data.code
}
let list = await getlist(params);
console.log(list.data.list);
}
}
getResult();
下面看结果
当然还剩最后一点，处理异常，可以加上try catch
async function getResult(){
console.log("我是getResult函数")
try{
let code = await getCode();
console.log(code.data.code);
if(code.data.code == 0){
var params = {
code:code.data.code
}
let list = await getlist(params);
console.log(list.data.list);
}
}catch(err){
console.log(err);
}
}
getResult();
个人认为做vue项目的时候，如果对于异常没有特殊处理，可以不加try catch，因为打印出来的错误跟vue自己报的错误是一样的，而且还是黑的字体，不如醒目的红色来的痛快啊！当然如果要对错误进行特殊处理，那么就加上吧
代码风格是不是简便了许多，而且异步代码变成了同步代码，下面我稍微讲一下后者写法的代码执行顺序
首先在 function 前面加 async 用来说明这个函数是一个异步函数，当然，async是要和await配合使用的，第一个请求
let code = await getCode();
await 意思是等一下，等着getCode()这个函数执行完毕，得到值后再赋值给code，然后再用code的值进行下一步操作，就是这么简单！！！赶紧去改代码！！
更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。