错误信息增强

需求分析

上一节课我们已经捕获了几类 AJAX 的错误，但是对于错误信息提供的非常有限，我们希望对外提供的信息不仅仅包含错误文本信息，还包括了请求对象配置 config，错误代码 code，XMLHttpRequest 对象实例 request以及自定义响应对象 response。

  1. axios({
  2.   method: 'get',
  3.   url: '/error/timeout',
  4.   timeout: 2000
  5. }).then((res) => {
  6.   console.log(res)
  7. }).catch((e: AxiosError) => {
  8.   console.log(e.message)
  9.   console.log(e.request)
  10.   console.log(e.code)
  11. })

这样对于应用方来说，他们就可以捕获到这些错误的详细信息，做进一步的处理。

那么接下来，我们就来对错误信息做增强。

创建 AxiosError 类

我们先来定义 AxiosError 类型接口，用于外部使用。

types/index.ts：

  1. export interface AxiosError extends Error {
  2.   config: AxiosRequestConfig
  3.   code?: string
  4.   request?: any
  5.   response?: AxiosResponse
  6.   isAxiosError: boolean
  7. }

接着我们创建 error.ts 文件，然后实现 AxiosError 类，它是继承于 Error 类。

helpers/error.ts：

  1. import { AxiosRequestConfig, AxiosResponse } from '../types'
  3. export class AxiosError extends Error {
  4.   isAxiosError: boolean
  5.   config: AxiosRequestConfig
  6.   code?: string | null
  7.   request?: any
  8.   response?: AxiosResponse
  10.   constructor(
  11.     message: string,
  12.     config: AxiosRequestConfig,
  13.     code?: string | null,
  14.     request?: any,
  15.     response?: AxiosResponse
  16.   ) {
  17.     super(message)
  19.     this.config = config
  20.     this.code = code
  21.     this.request = request
  22.     this.response = response
  23.     this.isAxiosError = true
  25.     Object.setPrototypeOf(this, AxiosError.prototype)
  26.   }
  27. }
  29. export function createError(
  30.   message: string,
  31.   config: AxiosRequestConfig,
  32.   code?: string | null,
  33.   request?: any,
  34.   response?: AxiosResponse
  35. ): AxiosError {
  36.   const error = new AxiosError(message, config, code, request, response)
  38.   return error
  39. }

AxiosError 继承于 Error 类，添加了一些自己的属性：config、code、request、response、isAxiosError 等属性。这里要注意一点，我们使用了 Object.setPrototypeOf(this, AxiosError.prototype)，这段代码的目的是为了解决 TypeScript 继承一些内置对象的时候的坑，参考。

另外，为了方便使用，我们对外暴露了一个 createError 的工厂方法。

createError 方法应用

修改关于错误对象创建部分的逻辑，如下：

xhr.ts：

  1. import { createError } from './helpers/error'
  3. request.onerror = function handleError() {
  4.   reject(createError(
  5.     'Network Error',
  6.     config,
  7.     null,
  8.     request
  9.   ))
  10. }
  12. request.ontimeout = function handleTimeout() {
  13.   reject(createError(
  14.     `Timeout of ${config.timeout} ms exceeded`,
  15.     config,
  16.     'ECONNABORTED',
  17.     request
  18.   ))
  19. }
  21. function handleResponse(response: AxiosResponse) {
  22.   if (response.status >= 200 && response.status < 300) {
  23.     resolve(response)
  24.   } else {
  25.     reject(createError(
  26.       `Request failed with status code ${response.status}`,
  27.       config,
  28.       null,
  29.       request,
  30.       response
  31.     ))
  32.   }
  33. }

导出类型定义

在 demo 中，TypeScript 并不能把 e 参数推断为 AxiosError 类型，于是我们需要手动指明类型，为了让外部应用能引入 AxiosError 类型，我们也需要把它们导出。

我们创建 axios.ts 文件，把之前的 index.ts 的代码拷贝过去，然后修改 index.ts 的代码。

index.ts：

  1. import axios from './axios'
  3. export * from './types'
  5. export default axios

这样我们在 demo 中就可以引入 AxiosError 类型了。

examples/error/app.ts：

  1. import axios, { AxiosError } from '../../src/index'
  3. axios({
  4.   method: 'get',
  5.   url: '/error/timeout',
  6.   timeout: 2000
  7. }).then((res) => {
  8.   console.log(res)
  9. }).catch((e: AxiosError) => {
  10.   console.log(e.message)
  11.   console.log(e.code)
  12. })

至此，我们关于 ts-axios 的异常处理逻辑就告一段落。下面的章节，我们会对 ts-axios 的接口做扩展，让它提供更多好用和方便的 API。