js 新語法 async await的使用
阿新 • • 發佈:2018-12-11
隨著es6的更新與普及新的語法又在es7、es8中推廣與更進一步;
es5的同步處理請求的方式:
server.getUser().then((res) => { if (res.status == 'success') { console.log('請求成功') getAddress(res.model.id) //成功後再繼續發下一個請求 } else { console.log('請求失敗') } }) function getAddress(userid){ server.getAddress({id:userid}).then((res) => { if (res.status == 'success') { console.log('請求成功') //處理邏輯 } else { console.log('請求失敗') } }) }
點評:此處至少有兩個問題
1.程式碼沒有加異常處理,如果介面返回失敗或程式碼質量報錯,會造成程式碼阻塞卡死應用;
2.巢狀發請求太落後已不適應當前前端的發展,造成可讀性差;
修改一下用es6 的async awiat
try{ let user =awiat getUser(); if(user){ let address = awiat getAddress(user.id) //處理邏輯 } }catch(e){ console.error(e) } //...省略程式碼 上面兩個方法報錯不會阻塞後面程式碼的執行 //封裝兩個請求方法 async function getUser(){ let data = ''; return new Promise(async (resolve, reject) => { try{ //加異常處理 data =await server.getUser(); if(data.status=='success'){ return resolve(data) }else{ return resolve('') } }catch(e){ reject(e) } }) } async function getAddress(id){ let data = ''; return new Promise(async (resolve, reject) => { try{ //加異常處理 data =await server.getAddress({id:id}); if(data.status=='success'){ return resolve(data) }else{ return resolve('') } }catch(e){ reject(e) } }) }