【源码共读】第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!!!

相关推荐
stoneship14 分钟前
Web项目减少资源加载失败白屏问题
前端
DaMu43 分钟前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
非专业程序员43 分钟前
一文读懂Font文件
前端
Asort1 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer1 小时前
什么是 React 中的远程组件?
前端·react.js
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js
知了一笑1 小时前
「AI」网站模版,效果如何?
前端·后端·产品
艾小码1 小时前
用了这么久React,你真的搞懂useEffect了吗?
前端·javascript·react.js
知觉1 小时前
实现@imput支持用户输入最多三位整数,最多一位小数的数值
前端