快捷導(dǎo)航

JS基于ES6新特性async await進(jìn)行異步處理操作示例

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

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

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

我們往往在項(xiàng)目中會(huì)遇到這樣的業(yè)務(wù)需求，就是首先先進(jìn)行一個(gè)ajax請(qǐng)求，然后再進(jìn)行下一個(gè)ajax請(qǐng)求，而下一個(gè)請(qǐng)求需要使用上一個(gè)請(qǐng)求得到的數(shù)據(jù)，請(qǐng)求少了還好說(shuō)，如果多了，就要一層一層的嵌套，就好像有點(diǎn)callback的寫(xiě)法了，那是相當(dāng)惡心的，下面我就來(lái)講一下如何使用ES6的新特性async await進(jìn)行異步處理，使上述情況就好像寫(xiě)同步代碼一樣，首先我們先舉個(gè)例子：

先寫(xiě)上json文件:

code.json:

{
  "code":0,
  "msg":"成功"
}

person.json:

{
  "code":0,
  "list":[
    {
      "id":1,
      "name":"唐僧"
    },
    {
      "id":2,
      "name":"孫悟空"
    },
    {
      "id":3,
      "name":"豬八戒"
    },
    {
      "id":4,
      "name":"沙僧"
    }
  ]
}

比如我們有兩個(gè)請(qǐng)求，如下，這里用的axios：

function getCode(){
  return axios.get('json/code.json');
}
function getlist(params){
  return axios.get('json/person.json',{params})
}

我們第二個(gè)請(qǐng)求獲取列表的時(shí)候需要使用第一個(gè)請(qǐng)求得到的code值，只有code值為0時(shí)，才能請(qǐng)求，而且當(dāng)做參數(shù)傳進(jìn)去，那么我們看一下常規(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é)果出來(lái)了，可是這種寫(xiě)法真的挺難受的，下面來(lái)一個(gè)async await的寫(xiě)法

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)然還剩最后一點(diǎn)，處理異常，可以加上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();

個(gè)人認(rèn)為做vue項(xiàng)目的時(shí)候，如果對(duì)于異常沒(méi)有特殊處理，可以不加try catch，因?yàn)榇蛴〕鰜?lái)的錯(cuò)誤跟vue自己報(bào)的錯(cuò)誤是一樣的，而且還是黑的字體，不如醒目的紅色來(lái)的痛快啊！當(dāng)然如果要對(duì)錯(cuò)誤進(jìn)行特殊處理，那么就加上吧

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

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