本文實(shí)例講述了JS基于ES6新特性async await進(jìn)行異步處理操作。分享給大家供大家參考，具體如下：
創(chuàng)新互聯(lián)主營蛟河網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app軟件開發(fā),蛟河h5小程序制作搭建,蛟河網(wǎng)站營銷推廣歡迎蛟河等地區(qū)企業(yè)咨詢
我們往往在項(xiàng)目中會遇到這樣的業(yè)務(wù)需求，就是首先先進(jìn)行一個ajax請求，然后再進(jìn)行下一個ajax請求，而下一個請求需要使用上一個請求得到的數(shù)據(jù)，請求少了還好說，如果多了，就要一層一層的嵌套，就好像有點(diǎn)callback的寫法了，那是相當(dāng)惡心的，下面我就來講一下如何使用ES6的新特性async await進(jìn)行異步處理，使上述情況就好像寫同步代碼一樣，首先我們先舉個例子：
先寫上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ù)傳進(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é)果出來了，可是這種寫法真的挺難受的，下面來一個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)然還剩最后一點(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();
個人認(rèn)為做vue項(xiàng)目的時候，如果對于異常沒有特殊處理，可以不加try catch，因?yàn)榇蛴〕鰜淼腻e誤跟vue自己報的錯誤是一樣的，而且還是黑的字體，不如醒目的紅色來的痛快?。‘?dāng)然如果要對錯誤進(jìn)行特殊處理，那么就加上吧
代碼風(fēng)格是不是簡便了許多，而且異步代碼變成了同步代碼，下面我稍微講一下后者寫法的代碼執(zhí)行順序
首先在 function 前面加 async 用來說明這個函數(shù)是一個異步函數(shù)，當(dāng)然，async是要和await配合使用的，第一個請求
let code = await getCode();
await 意思是等一下，等著getCode()這個函數(shù)執(zhí)行完畢，得到值后再賦值給code，然后再用code的值進(jìn)行下一步操作，就是這么簡單！?。≮s緊去改代碼??！
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
