在async/await中,await接收的需要是一個promise對象,那么我這樣寫:
async getAddressList () {
this.list = await AreaSvr.getList(320100);
}
getAddressList().catch((err) => {
...
});
AddressSvr.getList = function (pid) {
return new Promise((resolve, reject) => {
Vue._http.get('area/get', {pId: pid}).then(
res => {
resolve(res.Data);
}, err => {
reject(err);
});
})
};
這樣是沒有問題的,AreaSvr.getList中返回的是一個promise對象。現在我把AreaSvr.getList封裝一下,加一個緩存:
let areaList = [];
AddressSvr.getAreaList = (level, pid) => {
// 接收等級跟pid兩個參數,如果已有areaList或者相關二級list,直接返回Promise.resolve(...)
if (level === 1 && areaList.length !== 0) {
return Promise.resolve(areaList)
} else if (level === 2) {
for (let i = 0; i < areaList.length; i++) {
if (areaList[i].AreaId === pid && areaList[i].children.length !== 0) {
return Promise.resolve(areaList[i].children)
}
}
}
// 這里對之前的http請求AddressSvr.getList進行封裝,在獲取到相關值之后,進行緩存並且返回
return new Promise(// 返回一個promise對象,讓await來接收
(resolve, reject) => {
AddressSvr.getList(pid).then(
res => {
if (level === 1) {
areaList = res;// 緩存areaList
return resolve(areaList); //返回
}
for (let i = 0; i < areaList.length; i++) {
if (areaList[i].AreaId === pid) {
areaList[i].children = res;// 緩存子列表
return resolve(areaList[i].children);// 返回
}
}
}, err => {
reject(err);
}
);
}
);
};
async getAddressList () {
this.list = await AreaSvr.getAreaList(1, 320100);//這里傳入等級,使用加了緩存的函數
if (this.list.length !== 0) {
this.childList = await AreaSvr.getAreaList(2, this.list[0].AreaId);
}
}
在這里,我在AddressSvr.getList的外面封裝了一層promise做了緩存,這時候await接收的是AddressSvr.getAddressList 這個函數返回的promise了,但是這個時候返回的promise無效,直接catch到error了,請問一下我哪邊寫的有問題?
