【源码共读】第21期 | await-to-js 如何优雅的捕获 await 的错误

1. 前言

2. await-to-js

await-to-js这个库解决了什么问题?

用于帮助处理基于 promise 的异步函数的错误和异常。

在 JavaScript 的 async/await 语法中,如果 await 的函数抛出一个错误,你必须使用 try/catch 语句来捕获并处理这个错误。

3. 源码解析

源码比较简单就是通过高阶函数传入执行函数,在内部通过try...catch进行错误捕获,返回正常的数据。

js 复制代码
function to<T, U = Error>(
  promise: Promise<T>,
  errorExt?: object
): Promise<[U, undefined] | [null, T]> {
// 返回promise
  return promise
    .then<[null, T]>((data: T) => [null, data])
    .catch<[U, undefined]>((err: U) => {
    // 关键点:当抛出错误,捕获后返回正常的数据
      if (errorExt) {
        const parsedError = Object.assign({}, err, errorExt);
        return [parsedError, undefined];
      }

      return [err, undefined];
    });
}

场景应用:

在项目中,我们通过axios进行接口请求,当接口请求前需要loading展示,接口正常时可以正常关闭。接口错误是如果不进行错误捕获,会一直加载中。

代码如下:

项目中使用code进行判断是否正常返回,所以代码改造和正常的返回格式保持一致。

js 复制代码
// 未进行错误捕获
tableLoading = true
const res = axios('/api/getList')
if(res.code===1){
    tableData = res.data
}
tableLoading = false
// 上面接口报错,阻塞后续代码执行,就需要添加错误处理
try{
    tableLoading = true
    const res = fetch('/api/getList')
    if(res.code===1){
        tableData = res.data
    }
}finally{
    tableLoading = false
}

所以参考await-to-js进行改造

js 复制代码
const axios = axios.create({
  baseURL: process.env.VUE_APP_API,
})

axios.interceptors.request.use(
  (config) => config,
  (error) => Promise.reject(error)
)

axios.interceptors.response.use(
  (response) => response, 
  (error) => Promise.reject(error)
)

async function request(method, url, config) {
  try {
    const res = await axios.request({
      method,
      url,
      ...config,
    })

    return res.data
  } catch (error) {
    // NOTE:拦截网络错误返回错误body
    return {
      code: 0,
      errorCode: '',
      errorDesc: '',
      data: null,
      msg: '网络错误',
      error,
    }
  }
}

axios的错误传播链,参考下前端错误传播,通过上面的改造后,就不需要每次进行错误捕获。

4. 总结

本次学习主要有:

  • 理解 JavaScript 中的错误处理和异常抛出机制
  • 了解了错误优先回调(Error-First Callback)
  • 对于错误的处理,都返回[err,data]适配了不同错误的处理,省略每次写try...catch的烦恼

O^O!!!

相关推荐
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms4 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4167 小时前
HTML面试题
前端·html
张可7 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿8 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
然我8 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法