JS學習- ES6 async await使用

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);
  }
}