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

以上是网上借鉴的写法,如果大家有更多更好用的写法,欢迎留下评论

最后修改:2022 年 09 月 23 日
如果觉得我的文章对你有用,请随意赞赏或留下你的评论~