隨着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)
}
})
}
