Typescript简单异常处理

前排提示：除非你想用以非常通用（try/catch）的方式处理错误，否则不要抛出错误。

场景

后端会返回相应的msg用于前端显示错误 axios拦截器返回的是reject在页面中统一处理
异步操作在try catch块里而catch里的error不能指定类型
区分系统Error或者自定义的ResponseError

(alias) type ResponseError = ResponseData<any> | Error
import ResponseError
Catch 子句变量不能有类型批注。ts(1196)

大概的数据结构可以参考下面的内容

开冲

1.定义自定义的类型们

// 自定义返回请求接口结构
interface ResponseData <T = any> {
  code: number
  msg: string
  data: T
}
 
// 联合内置Error和自定义数据结构
export type ResponseError = ResponseData | Error

2.实现统一处理方法

export const ErrorHandler = (err: ResponseError) => {
  // 只列举一种类型保护的判断 使用as也是一个不错的选择 总有一款适合你
  if ('msg' in err) {  // 类型保护的判断 区分系统错误和API请求错误
    console.log('code', err.code, err.msg)  // 打印API请求错误对应的code & msg
  } else {
    console.log(err)  // 系统错误自己玩
  }
}

3.页面异步操作调用

  useAsyncEffect(async () => {
    try{
      // DO ASYNC THING
      return () => {
        // cleanup
     }
    } catch (error) {
      ErrorHandler(error)  // 调用统一处理函数
    }
  }, [])

菜鸡的异常处理就是这么朴实无华且枯燥😎