在 async/await
中,通常使用 try/catch
块来捕获错误,写的多了看起来也不太好看,有没有更简洁的方案呢
注: 以下部分写法是 vue
中的
第1种
直接使用 catch
处理错误
// getListApi为返回 promise的请求,以下为示例
const getListApi = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve([]);
}, 1000);
});
}
// 第1种写法
const res = await getListApi()
.catch((err) => {
console.log(err);
});
if (typeof res === 'undefined') {
return;
}
// 正常返回的数据处理
this.list = res;
第2种
主要使用了一个自定义的toFn
方法,方法接收一个 promise
,返回数组,数组第一项为异常数据,第二项为 promise
正常的返回数据,
// getListApi为返回 promise的请求,以下为示例
const getListApi = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve([]);
}, 1000);
});
}
const toFn = (promise) => {
return promise
.then((data) => {
return [null, data];
})
.catch((err) => [err]);
}
// 第2种写法
const getRequest = () => {
// 调用写法
const [err, data] = await this.toFn(
getListApi()
);
if (err) {
return false;
}
// 正常返回的数据处理
this.list = data;
return true;
}
ps
以上是网上借鉴的写法,如果大家有更多更好用的写法,欢迎留下评论