async/await 中await接收的promise的问题

Posted 2021-03-03 dillonmei

在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了，请问一下我哪边写的有问题？