基于TypeScript从零重构axios

一、在GitHub上创建一个代码仓库

找到仓库地址：git@github.com:QianDingweiCharles/ts-axios.git

二、项目配置

本地新建一个文件夹axios

用VScode打开，通过Typescript脚手架Typescript library starter搭建项目

命令行： git clone https://github.com/alexjoverm/typescript-library-starter.git axios

cd axios

查看远程分支：git remote -v,因为没有关联所以没有任何输出

关联远程分支：git remote add origin git@github.com:QianDingweiCharles/ts-axios.git

拉取远程分支并合并到当前的代码：git pull origin master

git branch 就可以看到本地也有master分支了

git push -u origin master

三、编写请求代码

//src/index.ts

import { AxiosRequestConfig } from './types'

import xhr from './xhr'

function axios(config: AxiosRequestConfig): void {

    xhr(config)

}

export default axios

//src/types/index.ts这是声明文件

export type Method = 'get' | 'GET'

    | 'delete' | 'Delete'

    | 'head' | 'HEAD'

    | 'post' | 'POST'

    | 'put' | 'PUT'

    | 'patch' | 'PATCH'

export interface AxiosRequestConfig {

    url: string

    method?: Method

    data?: any

    params?: any

}

　四、处理请求参数

4.1、参数是数组

params:{foo: ['bar,'baz'']},最终请求的url是/base/get?foo[]=bar&foo[]=baz

4.2、参数是一个对象

params:{foo:{bar:'baz'}},最终请求的url是/base/get?foo=%7B........,foo后面拼接的是{“bar”:"baz"} encode后的结果。

4.3 、参数值是一个Date类型

params：{date}最终请求的url是/base/get?data=2019-04-01......，date后面拼接的是date.toISOString()的结果

4.4 特殊字符支持

对于字符@、：、￥、，空格，[，]，我们是允许出现在url中的，不希望被encode

params：{foo:'@:$'}最终请求的url是/base/get?foo=@:$+,注意，我们会吧空格转成+

4.5空值忽略

params：{foo：bar,baz:null}最终的请求url是/base/get?foo=bar

4.6丢弃url中的哈希标记

axios（{method：‘get’,url: '/base/get#hash',params:{foo:'bar'}}）最终请求的url是/base/get?foo=bar

4.7保留url中已经存在的参数

axios（{method：‘get’,url:'/base/get?foo=bar',params:{bar:'baz'}}）最终的请求url是/base/get?foo=bar&bar=baz

//src/helpers/url.ts

import { isDate, isPlainObject } from './util'

//将特殊的字符转换回来

function encode(val: string): string {

  return encodeURIComponent(val)

    .replace(/%40/g, '@')

    .replace(/%3A/gi, ':')

    .replace(/%24/g, '$')

    .replace(/%2C/gi, ',')

    .replace(/%20/g, '+')

    .replace(/%5B/gi, '[')

    .replace(/%5D/gi, ']')

}

export function buildURL(url: string, params?: any): string {

  if (!params) {

    return url

  }

  const parts: string[] = []

  Object.keys(params).forEach(key => {

    const val = params[key]

    if (val === null || typeof val === 'undefined') {

      return

    }

    //将所有的值都转成数组

    let values = []

    if (Array.isArray(val)) {

      values = val

      key += '[]'

    } else {

      values = [val]

    }

    values.forEach(val => {

      if (isDate(val)) {

        val = val.toISOString()

      } else if (isPlainObject(val)) {

        val = JSON.stringify(val)

      }

      parts.push(`${encode(key)}=${encode(val)}`)

    })

  })

  let serializedParams = parts.join('&')

  if (serializedParams) {

    const markIndex = url.indexOf('#')

    //去掉哈希值

    if (markIndex !== -1) {

      url = url.slice(0, markIndex)

    }

    url += (url.indexOf('?') === -1 ? '?' : '&') + serializedParams

  }

  return url

}

//src/helpers/util.ts

const toString = Object.prototype.toString

export function isDate(val: any): val is Date {

  return toString.call(val) === '[object Date]'

}

// export function isObject (val: any): val is Object {

//   return val !== null && typeof val === 'object'

// }

export function isPlainObject(val: any): val is Object {

  return toString.call(val) === '[object Object]'

}

五、处理请求的body数据

需要将请求的data进行处理，如果是普通的对象，需要转换成JSON格式的数据

//src/helpers/data.ts

import { isPlainObject } from './util'

export function transformRequest(data: any): any {

  if (isPlainObject(data)) {

    return JSON.stringify(data)

  }

  return data

}

export function transformResponse(data: any): any {

  if (typeof data === 'string') {

    try {

      data = JSON.parse(data)

    } catch (e) {

      // do nothing

    }

  }

  return data

}

//src/index.ts

import { AxiosRequestConfig } from './types'

import xhr from './xhr'

import { buildURL } from './helpers/url'

import { transformRequest } from './helpers/data'

function axios(config: AxiosRequestConfig): void {

    processConfig(config)

    xhr(config)

}

function processConfig(config: AxiosRequestConfig) {

    config.url = transformURL(config)

    config.data = transformRequestData(config)

}

function transformURL(config: AxiosRequestConfig) {

    const { url, params } = config

    return buildURL(url, params)

}

function transformRequestData(config: AxiosRequestConfig) {

    return transformRequest(config.data)

}

export default axios

六、处理请求头

上一步对data进行了处理，但是content-type 为plain-text而不是application/json浏览器无法处理

//src/helpers/headers.ts

import { isPlainObject } from './util'

function normalizeHeaderName(headers: any, normalizedName: string): void {

  if (!headers) {

    return

  }

  Object.keys(headers).forEach(name => {

    if (name !== normalizedName && name.toUpperCase() === normalizedName.toUpperCase()) {

      headers[normalizedName] = headers[name]

      delete headers[name]

    }

  })

}

export function processHeaders(headers: any, data: any): any {

  normalizeHeaderName(headers, 'Content-Type')

  if (isPlainObject(data)) {

    if (headers && !headers['Content-Type']) {

      headers['Content-Type'] = 'application/json;charset=utf-8'

    }

  }

  return headers

}

在配置接口中添加headers字段，用户可以设置headers

在src/index.ts加入处理请求头逻辑：

这样就可以了吗？其实并没有，真正发送request headers 的xhr我们并没有修改，下一步，修改xhr:

七、获取响应数据

在此之前我们发送的请求都是从网络层面接手服务端返回的数据，单数代码层面并没有做任何关于返回数据的处理，我们希望能处理服务端响应的数据，并支持Promise链式调用的方式，如下：

axios({

    method: 'post',

    url: '/base/post',

    data: {

        a: 1,

        b: 2

    }

}).then((res:any)=> {console.log(res)})

　　我们可以拿到res对象，并且我们希望该对象包括：服务端返回的数据data,HTTP状态码status，状态消息，响应头headers，请求配置对象config，以及请求的XMLHttpRequest对象实例request。

7.1、定义接口类型

在src/types/index.ts

responseType让用户定义返回的类型，AxiosResponse是回调函数resolve传出去，也就是then方法里面得到的参数。AxiosPromise是返回的promise对象。

补充知识：

onreadystatechange：XMLHttpRequest.onreadystatechange 会在 XMLHttpRequest 的readyState 属性发生改变时触发 readystatechange 事件的时候被调用。

readyState：属性返回一个 XMLHttpRequest 代理当前所处的状态。一个 XHR 代理总是处于下列状态中的一个。

getAllResponseHeaders() ：方法返回所有的响应头，以\r\n分割的字符串，或者 null 如果没有收到任何响应.

修改src/xhr.ts：

import { AxiosRequestConfig, AxiosPromise,AxiosResponse } from './types'

export default function xhr(config: AxiosRequestConfig): AxiosPromise {

    return new Promise((resolve) => {

        const { method = 'get', url, data = null, headers,responseType } = config

        const request = new XMLHttpRequest()

        if(responseType){

            request.responseType = responseType

        }

        request.open(method.toUpperCase(), url, true)

        request.onreadystatechange = function handleLoad(){

            if(request.readyState !==4){

                return

            }

            const responseHeaders = request.getAllResponseHeaders()

            const responseData = responseType !== 'text' ? request.response: request.responseText

            const response: AxiosResponse = {

                data: responseData,

                status: request.status,

                statusText: request.statusText,

                headers: responseHeaders,

                config,

                request

            }

            resolve(response)

        }

        Object.keys(headers).forEach((name) => {

            if (data === null && name.toLowerCase() === 'content-type') {

                delete headers[name]

            } else {

                request.setRequestHeader(name, headers[name])

            }

        })

        request.send(data)

    })

}

　　修改src/index.ts

八、处理响应header+处理响应data

8.1 处理响应header

通过XMLHTTPRequest的getAllResponseHeaders方法获取的值是一串以\r\n的字符串，我们希望最终解析成一个对象结构。

在src/helpers/headers.ts中添加函数：

export function parseHeaders(headers: string): any {

    let parsed = Object.create(null)

    if (!headers) {

        return

    }

    headers.split('\r\n').forEach((line) => {

        let [key, val] = line.split(':')

        key = key.trim().toLowerCase()

        if (!key) {

            return

        }

        if (val) {

            val = val.trim()

        }

        parsed[key] = val

    })

}

　修改xhr.ts修改responseHeaders：

8.2处理响应data

在我们不设置responseType的情况下，当服务端返回给我们的数据是字符串类型，我们可以尝试再把他转换成一个JSON 对象，例如：

data:"{"a":1,"b":2}"

转成：

data:{

a:1,

b:2

}

　再src/helpers/data.ts中增加函数：

export function transformResponse(data: any): any {

    if (typeof data === 'string') {

        try {

            data = JSON.parse(data)

        } catch (e) {

            //

        }

    }

    return data

}

修改src/index.ts如下

九、异常情况处理

9.1 网络异常错误

当网络出现异常，比如不通的时候发送请求会触发XMLHttpRequest对象实例的error事件，于是我们可以在onerror的事件回调函数找那个捕获此类错误

修改src/xhr.ts如下：

9.2处理超时错误

当用户配置了超时时间时，如果超过了这个时间，那么将触发onTimeout事件。

在src/types/index.ts中的AxiosRequestConfig接口，添加timeout

修改xhr.ts

9.3 处理非200状态码

9.4错误信息增强

希望提供的错误信息不仅仅包含错误文本信息，还包括请求对象配置config、错误代码code，XMLHttpRequest对象实例request，以及自定义响应对象response。

在src/type/index.ts中增加接口：

export interface AxiosError extends Error {

    config: AxiosRequestConfig

    code?: string

    request?: any

    response?: AxiosResponse

    isAxiosError?: boolean

}

　　新增./src/helpers/error.ts

import { AxiosRequestConfig, AxiosResponse } from '../types'

export class AxiosErros extends Error {

    config: AxiosRequestConfig

    code?: string |null

    request?: any

    response?: AxiosResponse

    isAxiosError: boolean

    constructor(

        message: string,

        config: AxiosRequestConfig,

        code?: string |null,

        request?: any,

        response?: AxiosResponse

    ) {

        super(message)

        this.config = config

        this.code = code

        this.request = request

        this.response = response

        this.isAxiosError =  true

        Object.setPrototypeOf(this,AxiosErros.prototype)

    }

}

//工程函数

export function createError(

    message: string,

    config: AxiosRequestConfig,

    code?: string |null,

    request?: any,

    response?: AxiosResponse): AxiosErros{

    return new AxiosErros(message,config,code,request,response)

}

然后新建src/axios.ts从index.ts中复制所有

//src/index.ts

import { AxiosRequestConfig, AxiosPromise, AxiosResponse } from './types'

import xhr from './xhr'

import { buildURL } from './helpers/url'

import { transformRequest, transformResponse } from './helpers/data'

import { processHeaders } from './helpers/headers'

function axios(config: AxiosRequestConfig): AxiosPromise {

    processConfig(config)

    return xhr(config).then((res) => {

        return transformResponseData(res)

    })

}

function processConfig(config: AxiosRequestConfig) {

    config.url = transformURL(config)

    config.headers = transformHeaders(config)

    config.data = transformRequestData(config)

}

function transformURL(config: AxiosRequestConfig) {

    const { url, params } = config

    return buildURL(url, params)

}

function transformRequestData(config: AxiosRequestConfig) {

    return transformRequest(config.data)

}

function transformHeaders(config: AxiosRequestConfig): void {

    const { headers, data } = config

    return processHeaders(headers, data)

}

function transformResponseData(res: AxiosResponse) {

    res.data = transformResponse(res)

    return res

}

export default axios

　　将src/index.ts改为：

import axios from './axios'

export * from './types'

export default axios

巴特西

基于TypeScript从零重构axios

一、在GitHub上创建一个代码仓库

二、项目配置

三、编写请求代码

四、处理请求参数

五、处理请求的body数据

六、处理请求头

七、获取响应数据

八、处理响应header+处理响应data

九、异常情况处理

其他请下载：https://files.cnblogs.com/files/QianDingwei/ts-axios-doc-master.zip

最新文章

热门文章

巴特西

基于TypeScript从零重构axios

一、在GitHub上创建一个代码仓库

二、项目配置

三、编写请求代码

四、处理请求参数

五、处理请求的body数据

六 、处理请求头

七、获取响应数据

八、处理响应header+处理响应data

九、异常情况处理

其他请下载：https://files.cnblogs.com/files/QianDingwei/ts-axios-doc-master.zip

最新文章

热门文章

　四、处理请求参数

六、处理请求头