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]
        }
   }
相关推荐
一个很帅的帅哥几秒前
JavaScript事件循环
开发语言·前端·javascript
小宁爱Python5 分钟前
Django Web 开发系列(二):视图进阶、快捷函数与请求响应处理
前端·django·sqlite
fox_5 分钟前
深入理解React中的不可变性:原理、价值与实践
前端·react.js
Github项目推荐7 分钟前
你的错误处理一团糟-是时候修复它了-🛠️
前端·后端
Code小翊12 分钟前
C语言bsearch的使用
java·c语言·前端
云枫晖13 分钟前
Webapck系列-初识Webpack
前端·javascript
慧一居士16 分钟前
HTML5 功能介绍,使用场景,对应功能点完整使用示例
前端
海在掘金6112724 分钟前
告别“undefined is not a function”:TS如何让你的函数调用更安心
前端
云中雾丽27 分钟前
Flutter中Stream的各种使用场景和实现方式
前端
CptW30 分钟前
第1篇(Ref):搞定 Vue3 Reactivity 响应式源码
前端·面试