处理错误基本实现

网络异常onerror

  1. request.onerror = err => {
  2.   reject(new Error('Networe Error'))
  3. }

请求超时ontimeout

  1.  request.ontimeout = (err) => {
  2.    reject(new Error(`Timeout of ${timeout}ms exceeded`))
  3.  }

:::warning 注意： 需要在 onreadystatecchange里判断status===0，否则会执行handleResponse方法先，从而调用了resolve(response) :::

非200状态码

  1.  function handleResponse(response: AxiosResponse) {
  2.    if (response.status >= 200 || response.status <= 300) {
  3.      resolve(response)
  4.    } else {
  5.      reject(`request failed with status ${response.status}`)
  6.    }
  7.  }

错误信息增强

创建 AxiosError类

Object.setPrototypeOf(this, AxiosError.prototype) 是为了： 处理ts继承内置对象，找不到原型方法的问题

  1. export class AxiosError extends Error {
  2.   isAxiosError: boolean;
  3.   request?: any;
  4.   response?: AxiosResponse;
  5.   code?: string;
  6.   config: AxiosRequestConfig;
  8.   constructor(
  9.     message: string,
  10.     config: AxiosRequestConfig,
  11.     code?: string,
  12.     request?: any,
  13.     responese?: AxiosResponse,
  14.   ) {
  15.     super(message)
  16.     this.isAxiosError = true
  17.     this.config = config
  18.     this.code = code
  19.     this.request = request
  20.     this.response = responese
  22.     // https://github.com/microsoft/TypeScript-wiki/blob/main/Breaking-Changes.md#extending-built-ins-like-error-array-and-map-may-no-longer-work
  23.     Object.setPrototypeOf(this, AxiosError.prototype)
  24.   }
  25. }
  27. // 定义工厂函数
  28. export function createError(
  29.   message: string,
  30.   config: AxiosRequestConfig,
  31.   code?: string,
  32.   request?: any,
  33.   responese?: AxiosResponse,
  34. ) {
  36.   return new AxiosError(
  37.     message,
  38.     config,
  39.     code,
  40.     request,
  41.     responese,
  42.   )
  43. }

应用

替换所有的new Error,使用createError替换,例如：

 request.onerror = () => {
   reject(createError('Networe Error', config, null, request))
 }

 request.ontimeout = () => {
   reject(createError(`Timeout of ${timeout}ms exceeded`, config, null, request))
 }

导出所有类型定义

新建axios.ts，把之前index.ts复制进去并导出，index.ts直接使用axios。
并且通过export * from './types/index' 导出所有类型定义

import axios from "./axios";

export default axios
// 导出所有类型定义
export * from './types/index'