快捷導(dǎo)航

JS基于ES6新特性async await進行異步處理操作示例

更新時間：2019年02月02日 10:22:14 作者：前端林三哥

這篇文章主要介紹了JS基于ES6新特性async await進行異步處理操作,結(jié)合實例形式分析了async await進行異步處理操作的相關(guān)原理、步驟與注意事項,需要的朋友可以參考下

本文實例講述了JS基于ES6新特性async await進行異步處理操作。分享給大家供大家參考，具體如下：

我們往往在項目中會遇到這樣的業(yè)務(wù)需求，就是首先先進行一個ajax請求，然后再進行下一個ajax請求，而下一個請求需要使用上一個請求得到的數(shù)據(jù)，請求少了還好說，如果多了，就要一層一層的嵌套，就好像有點callback的寫法了，那是相當(dāng)惡心的，下面我就來講一下如何使用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時，才能請求，而且當(dāng)做參數(shù)傳進去，那么我們看一下常規(guī)的做法吧

function getFinal(){
   console.log("我是getFinal函數(shù)")
   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();

看結(jié)果

雖然結(jié)果出來了，可是這種寫法真的挺難受的，下面來一個async await的寫法

async function getResult(){
      console.log("我是getResult函數(shù)")
      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();

下面看結(jié)果

當(dāng)然還剩最后一點，處理異常，可以加上try catch

async function getResult(){
      console.log("我是getResult函數(shù)")
      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自己報的錯誤是一樣的，而且還是黑的字體，不如醒目的紅色來的痛快?。‘?dāng)然如果要對錯誤進行特殊處理，那么就加上吧

代碼風(fēng)格是不是簡便了許多，而且異步代碼變成了同步代碼，下面我稍微講一下后者寫法的代碼執(zhí)行順序

首先在 function 前面加 async 用來說明這個函數(shù)是一個異步函數(shù)，當(dāng)然，async是要和await配合使用的，第一個請求