JS学习- ES6 async await使用

Posted 2021-02-03 我自是年少

async 函数是什么？一句话，它就是 Generator 函数的语法糖。

使用场景常常会遇到，请求完一个接口，拿完值再去请求另外一个接口，我们之前回调callback函数处理，如果很多的情况下，看起来很冗余，这时我们可以用async函数。

比如我们有两个请求，如下，这里用的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();

　

 

基本用法：

返回promise对象　

 

有时，我们希望即使前一个异步操作失败，也不要中断后面的异步操作。这时可以将第一个 await 放在 try...catch 结构里面，这样不管这个异步操作是否成功，第二个 await 都会执行。

async function f() {
  try {
    await Promise.reject(‘出错了‘);
  } catch(e) {
  }
  return await Promise.resolve(‘hello world‘);
}

f()
.then(v => console.log(v))
// hello world

如果有多个 await 命令，可以统一放在 try...catch 结构中。

async function main() {
  try {
    const val1 = await firstStep();
    const val2 = await secondStep(val1);
    const val3 = await thirdStep(val1, val2);

    console.log(‘Final: ‘, val3);
  }
  catch (err) {
    console.error(err);
  }
}