在 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 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏或留下你的评论~