如何使用ES6的新特性async await进行异步处理

ZEHAN

发布于 2020-10-14 09:40:04

1.1K0

发布于 2020-10-14 09:40:04

文章被收录于专栏：前端开发ZEHAN

如何使用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();

如果对于异常没有特殊处理，可以不加try catch，因为打印出来的错误跟vue自己报的错误是一样的，而且还是黑的字体，不如醒目的红色来的痛快啊！当然如果要对错误进行特殊处理，那么就加上吧

代码风格是不是简便了许多，而且异步代码变成了同步代码，下面我稍微讲一下后者写法的代码执行顺序

首先在 function 前面加 async 用来说明这个函数是一个异步函数，当然，async是要和await配合使用的，第一个请求