async/await 异常捕获更优雅的处理方式

1.async函数中为什么需要捕获异常?

任何一个await语句后面的 Promise 对象变为reject状态,那么整个async函数都会中断执行。有时,我们希望即使前一个异步操作失败,也不要中断后面的异步操作。这时可以将第一个await放在try...catch结构里面,这样不管这个异步操作是否成功,第二个await都会执行。

那么也意味着并不是所有的async函数中都需要使用trycatch。比如,有这样一个场景,项目中写了一个定时刷新列表的异步任务,如果刷新成功,则提示用户:数据已于XXX时间更新成功。此时,如果使用了try...catch,则会出现接口刷新失败,也会提示用户数据刷新成功。

js 复制代码
  enableLoopTask(){
      if(this.timerId) clearInterval(this.timerId)
      this.timerId = setInterval(()=>{
        this.loadData()
        const refreshTime = moment(Date.now()).format("YYYY-MM-DD HH:mm:ss")
        this.$message.success(`当前列表数据已于${refreshTime}更新成功,请查看!`);
      },1000 * 5)
    },
    // 点击查询时判断是否是当天,是当天 需要间隔30min刷新一次数据
    searchQuery() {
      this.queryParams = Object.assign({},this.formData)
      this.loadData()
      const isEnable = this.formData.businessDate === today
      if(!isEnable) {
        clearInterval(this.timerId)
        return
      }
      this.enableLoopTask()
    },

2.什么情况下需要处理异常

2.1多个异步请求串行

js 复制代码
try {  
  // 获取列表list  
  const list = await getList(params)  
  // 获取单个详情  
  const info = await getListById(list[0]?.id)  
} catch {}

2.2处理异步请求的 loading 状态

js 复制代码
try { 
  this.loading = true
  // 获取列表list  
  const list = await getList(params)  
} finally {  
  this.loading = false  
}

如果请求接口失败就想一直loading,那就另外处理了。因为await 命令后面的函数本身是一个promise,所以上面的也可以直接使用catch,如下:

js 复制代码
this.loading = true  
let res = await getList().catch(() => (this.loading = false))  
if (!res) return

3.那怎么避免项目中大量的try-catch~呢?

js 复制代码
   /**
         * @param { Promise } promiseFn
         * @param { Object= } errorExt - Additional Information you can pass to the err object
         * @return { Promise }
         */
  function fetchAsyncTuple(promiseFn,errorExt){
        return promiseFn.then(res=>{
            return [res,null]
        }).catch(error=>{
            if(errorExt) {
                const combineError = Object.assign({},error,errorExt)
                return combineError
            }  
            return [undefined,error]     
       })
   }

优化后,业务中直接这样类似这样使用:

js 复制代码
    async getProjectInfoList(params) {
      this.infoListLoading = true;
      if (params === 1) {
        this.paginationProps.page = 1;
      }
     const [data,error] =await fetchAsyncTuple(fetchProjectInfoList(this.queryParams))
     if(!error){
        this.paginationProps.total = data.data.page.totalCount;
        this.tableData = data.data.page.list;
        this.infoListLoading = false;
     } 
    },

没优化前是这样的:

js 复制代码
  async getProjectInfoList(params) {
      this.infoListLoading = true;
      if (params === 1) {
        this.paginationProps.page = 1;
      }
      try {
        const res = await fetchProjectInfoList(this.queryParams);
        this.paginationProps.total = res.data.page.totalCount;
        this.tableData = res.data.page.list;
        this.infoListLoading = false;
      } catch (error) {
        console.error("error---", error);
      } finally {
        this.infoListLoading = false;
      }
 },

或者这样是否也可以呢?

js 复制代码
   const fetchAsyncTuple = async (promiseCallback) => {
        try {
            const res = await promiseCallback
            if (res) {
                return [res, null]
            }
        } catch (error) {
            return [null, error]
        }
   }
相关推荐
因吹斯汀1 小时前
一饭封神:当AI厨神遇上你的冰箱,八大菜系大师在线battle!
前端·vue.js·ai编程
再学一点就睡1 小时前
NATAPP 内网穿透指南:让本地项目轻松 “走出去”
前端
拜无忧1 小时前
2025最新React项目架构指南:从零到一,为前端小白打造
前端·react.js·typescript
稻草人不怕疼1 小时前
记一次从“按钮点不动”到“窗口派发缺失”的排查过程
前端
irving同学462381 小时前
TypeORM 列装饰器完整总结
前端·后端·nestjs
彭于晏爱编程1 小时前
你真的了解 Map、Set 嘛
前端
崔璨1 小时前
详解Vue3的响应式系统
前端·vue.js
摸鱼的鱼lv1 小时前
🔥 Vue.js组件通信全攻略:从父子传值到全局状态管理,一篇搞定所有场景!🚀
前端·vue.js
IT_陈寒1 小时前
Java性能优化:10个让你的Spring Boot应用提速300%的隐藏技巧
前端·人工智能·后端
whysqwhw2 小时前
Hippy 跨平台框架扩展原生自定义组件的完整实现方案对比
前端