TS重构axios——处理请求错误

处理网路异常错误

XMLHttpRequest.status

只读属性 XMLHttpRequest.status 返回了XMLHttpRequest 响应中的数字状态码。

status 的值是一个无符号短整型。在请求完成前，status的值为0。

值得注意的是，如果 XMLHttpRequest 出错，浏览器返回的 status 也为0。

网络错误问题

request.onerror = function handleError () {
    reject(new Error('Network Error'))
}

请求超时问题

1. 设定最长请求时间

   if(timeout) {
       request.timeout = timeout
   }
   

2. 处理超时问题

   // 请求超时问题
   request.ontimeout = function handleTimeout () {
       reject(new Error(`Time out of ${timeout} ms exceeded`))
   }
   

处理其他异常问题

function handleResponse(response : AxiosResponse) : void{
    if(response.status >= 200 && response.status < 300) {
        resolve(response)
    } else {
        reject(new Error(`Request failed with status code ${response.status}`))
    }
}

在监听请求状态的函数中添加

        // 监听请求状态
        request.onreadystatechange = function handleLoad () {
            if (request.readyState !== 4) {
                return
            }
            // 请求为完成或者出错
            if (request.status === 0) {
                return
            }
            // 获取response的Headers
            const responseHeaders = paresHeaders(request.getAllResponseHeaders())
            // 获取response的data
            const responseData =  responseType !== 'text' ? request.response : request.responseText
            
            const response:AxiosResponse = {
                 data:responseData,
                 status:request.status,
                 statusText:request.statusText,
                 headers:responseHeaders,
                 config,
                 request
            }
            handleResponse(response)
        }

优化错误处理

效果：如果出现错误，将返回错误信息、请求的参数以及code，方便对错误进行处理

我们将通过创建AxiosError类进行处理

创建接口

export interface AxiosError extends Error {
    isAxiosError: boolean,
    config: AxiosRequestConfig,
    code?: number | string,
    request?: any,
    response?: AxiosResponse
}

创建对象

import { AxiosRequestConfig, AxiosResponse } from './../types/index';
export class AxiosError extends Error {
    isAxiosError:boolean
    config:AxiosRequestConfig
    code?:string | number
    request?:any
    response?:AxiosResponse

    constructor(
        message:string,
        config:AxiosRequestConfig,
        code?:string | number,
        request?:any,
        response?:AxiosResponse

    ){
        super(message)
        
        this.config = config
        this.code = code
        this.request = request
        this.response = response
        this.isAxiosError = true

        // 解决ts的问题，在继承Error、Map、Array的时候需要添加
        Object.setPrototypeOf(this, AxiosError.prototype)
    }
}

export function createError(
    message:string,
    config:AxiosRequestConfig,
    code?:string | number,
    request?:any,
    response?:AxiosResponse
){
    const error = new AxiosError(message,config,code,request,response)
    return error
}