其實(shí)也沒什么,就是用上ES7的異步函數(shù)菠齿,讓ajax使用起來更方便惭每。這個方便主要是體現(xiàn)在:無回調(diào) & 無then鏈?zhǔn)?& 輕松收集異常。
大致分3步:
1围段、封裝API類(這步不用異步函數(shù))
這一步一般會單獨(dú)建立一個文件顾翼!
// 定義一個API類,專門用于獲取各類數(shù)據(jù)
class Api {
// 有的ajax請求是會做鑒權(quán)的奈泪,constructor里放這些鑒權(quán)參數(shù)
constructor (token) {
this.token =token;
}
// opt 里存放特定請求需要的參數(shù)适贸,如url等
getUser (opt) {
return new Promise((resolve, reject) => {
$.ajax({
headers:{
token:this.token
},
url:opt.url,
data:opt.data,
success:function(data){
resolve(data);
},
error:function(error,status){
reject(error);
}
})
})
}
//其他API定義區(qū)
...
}
2、進(jìn)一步封裝特定API(使用異步函數(shù))
這一步一般是在特定的需要調(diào)用某API時用到
// const api = new Api(token)一般會提前執(zhí)行涝桅,比如在vue組件script的import和export default之間執(zhí)行拜姿,這也是為了避免該語句在每個具體api里都執(zhí)行一次。
// 在vue中冯遂,可以將該函數(shù)放在methods里
async function loadUserData (opt) {
try{
const user = await api.getUser(opt)蕊肥;
// 根據(jù)user狀態(tài)執(zhí)行業(yè)務(wù)邏輯
...
}catch(e){
// 請求異常的處理邏輯
}
}
第三步:使用API
// 在vue中,可以將該代碼放在mounted里
loadUserData(opt)
經(jīng)過這三步债蜜,基本就實(shí)現(xiàn)了無回調(diào)晴埂,無then鏈?zhǔn)秸{(diào)用和輕松處理錯誤這幾個比較煩人的問題啦!