使用ES6新特性async await進行非同步處理

我們往往在專案中會遇到這樣的業務需求，就是首先先進行乙個ajax請求，然後再進行下乙個ajax請求，而下乙個請求需要使用上乙個請求得到的資料，請求少了還好說，如果多了，就要一層一層的巢狀，就好像有點callback的寫法了，那是相當噁心的，下面我就來講一下如何使用es6的新特性async await進行非同步處理，使上述情況就好像寫同步**一樣，首先我們先舉個例子：

先寫上json檔案:

code.json:

person.json:

,,,
]}

比如我們有兩個請求，如下，這裡用的axios：

function
getcode()
function
getlist(params))
}

我們第二個請求獲取列表的時候需要使用第乙個請求得到的code值，只有code值為0時，才能請求，而且當做引數傳進去，那麼我們看一下常規的做法吧

function
getfinal()
getlist(params).then(
function
(res)})}
})}getfinal();

看結果

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

async function
getresult()
let list =await getlist(params);
console.log(list.data.list);}}
getresult();

下面看結果

當然還剩最後一點，處理異常，可以加上try catch

async function
getresult()
let list =await getlist(params);
console.log(list.data.list);}}
catch
(err)
}getresult();

個人認為做vue專案的時候，如果對於異常沒有特殊處理，可以不加try catch，因為列印出來的錯誤跟vue自己報的錯誤是一樣的，而且還是黑的字型，不如醒目的紅色來的痛快啊！當然如果要對錯誤進行特殊處理，那麼就加上吧

**風格是不是簡便了許多，而且非同步**變成了同步**，下面我稍微講一下後者寫法的**執行順序

首先在 function 前面加 async 用來說明這個函式是乙個非同步函式，當然，async是要和await配合使用的，第乙個請求

let code = await getcode();

await 意思是等一下，等著getcode（）這個函式執行完畢，得到值後再賦值給code，然後再用code的值進行下一步操作，就是這麼簡單！！！趕緊去改**！！

使用ES6新特性async await進行非同步處理

es6新特性 ES6新特性（一）

ES6新特性須知

es6新特性分享

使用ES6新特性async await進行非同步處理

es6新特性 ES6新特性（一）

ES6新特性須知

es6新特性分享

相關推薦