• JS案例：实现一个简易版axios

    目录

    前言：

    功能特性：

    api设计

    功能实现：

    功能验证：

    node环境下：

    vite-dev环境下：

    写在最后

    前言：

    axios是一个的前端请求工具，其优秀的场景复用性使它可以运行在node环境和浏览器环境，在浏览器环境中使用的是xhr，在node中则是使用http模块，最近在封装一些工具函数，恰好接触到了这一块，于是想分享一下心得，希望对大家有帮助。

    注：文章中有一些类型和函数未给出可以在这个工具包中找到

    功能特性：

    浏览器环境下，我使用的是fetch而摒弃了xhr的封装，这会使低版本浏览器兼容上有一定缺陷，后续有时间的话可能会加上，node环境下依旧使用的http模块

    功能上实现了基础请求功能，内部采用的是promise的方式，实现了请求及响应的拦截以及超时取消请求，或手动取消请求

    api设计

    1. // request
    2.  
    3. export type IRequestParams = T | IObject<any> | null
    4. // 请求路径
    5. export type IUrl = string
    6. // 环境判断
    7. export type IEnv = 'Window' | 'Node'
    8. // fetch返回取值方式
    9. export type IDataType = "text" | "json" | "blob" | "formData" | "arrayBuffer"
    10. // 请求方式
    11. export type IRequestMethods = "GET" | "POST" | "DELETE" | "PUT" | "OPTION" | "HEAD" | "PATCH"
    12. // body结构
    13. export type IRequestBody = IRequestParams<BodyInit>
    14. // heads结构
    15. export type IRequestHeaders = IRequestParams<HeadersInit>
    16. // 请求基础函数
    17. export type IRequestBaseFn = (url: IUrl, opts: IRequestOptions) => Promise<any>
    18. // 请求函数体
    19. export type IRequestFn = (url?: IUrl, query?: IObject<any>, body?: IRequestBody, opts?: IRequestOptions) => Promise<any>
    20. // 请求参数
    21. export type IRequestOptions = {
    22.     method?: IRequestMethods
    23.     query?: IRequestParams<IObject<any>>
    24.     body?: IRequestBody
    25.     headers?: IRequestHeaders
    26.     // AbortController 中断控制器，用于中断请求
    27.     controller?: AbortController
    28.     // 超时时间
    29.     timeout?: number
    30.     // 定时器
    31.     timer?: number | unknown | null
    32.     [key: string]: any
    33. }
    34. // 拦截器
    35. export type IInterceptors = {
    36.     // 添加请求，响应，错误拦截
    37.     use(type: "request" | "response" | "error", fn: Function): void
    38.     get reqFn(): Function
    39.     get resFn(): Function
    40.     get errFn(): Function
    41. }
    42. // 公共函数
    43. export type IRequestBase = {
    44.     // 请求根路由
    45.     readonly origin: string
    46.     // 简单判断传入的路由是否是完整url
    47.     chackUrl: (url: IUrl) => boolean
    48.     // 环境判断，node或浏览器
    49.     envDesc: () => IEnv
    50.     // 全局的错误捕获
    51.     errorFn: <Err = any, R = Function>(reject: R) => (err: Err) => R
    52.     // 清除当前请求的超时定时器
    53.     clearTimer: (opts: IRequestOptions) => void
    54.     // 初始化超时取消
    55.     initAbort: IRequestOptions>(opts: T) => T
    56.     // 策略模式，根据环境切换请求方式
    57.     requestType: () => IRequestBaseFn
    58.     // 拼接请求url
    59.     fixOrigin: (fixStr: string) => string
    60.     // 请求函数
    61.     fetch: IRequestBaseFn
    62.     http: IRequestBaseFn
    63.     // fetch响应转换方式
    64.     getDataByType: (type: IDataType, response: Response) => Promise<any>
    65. }
    66. // 初始化并兼容传入的参数
    67. export type IRequestInit = {
    68.     initDefaultParams: (url: IUrl, opts: IRequestOptions) => any
    69.     initFetchParams: (url: IUrl, opts: IRequestOptions) => any
    70.     initHttpParams: (url: IUrl, opts: IRequestOptions) => any
    71. }
    72. // 请求主体类
    73. export type IRequest = {
    74.     GET: IRequestFn
    75.     POST: IRequestFn
    76.     DELETE: IRequestFn
    77.     PUT: IRequestFn
    78.     OPTIONS: IRequestFn
    79.     HEAD: IRequestFn
    80.     PATCH: IRequestFn
    81. } & IRequestBase

    功能实现：

    首先是拦截器的钩子函数，在请求响应以及错误时运行这些函数，将回调函数返回至外部

    1. class Interceptors implements IInterceptors {
    2.     private requestSuccess: Function
    3.     private responseSuccess: Function
    4.     private error: Function
    5.     use(type, fn) {
    6.         switch (type) {
    7.             case "request":
    8.                 this.requestSuccess = fn
    9.                 break;
    10.             case "response":
    11.                 this.responseSuccess = fn
    12.                 break;
    13.             case "error":
    14.                 this.error = fn
    15.                 break;
    16.         }
    17.         return this
    18.     }
    19.     get reqFn() {
    20.         return this.requestSuccess
    21.     }
    22.     get resFn() {
    23.         return this.responseSuccess
    24.     }
    25.     get errFn() {
    26.         return this.error
    27.     }
    28. }

    接下来是基础工具函数，请求时使用的工具函数一般会封装在这，这里还对请求函数做了个抽象处理，因为工具函数requestType 会使用到这两个请求函数

    1. abstract class RequestBase extends Interceptors implements IRequestBase {
    2.     readonly origin: string
    3.     constructor(origin) {
    4.         super()
    5.         this.origin = origin ?? ''
    6.     }
    7.     abstract fetch(url, opts): Promise<void>
    8.     abstract http(url, opts): Promise<void>
    9.  
    10.     chackUrl = (url: string) => {
    11.         return url.startsWith('/')
    12.     }
    13.  
    14.     fixOrigin = (fixStr: string) => {
    15.         if (this.chackUrl(fixStr)) return this.origin + fixStr
    16.         return fixStr
    17.     }
    18.  
    19.     envDesc = () => {
    20.         if (typeof Window !== "undefined") {
    21.             return "Window"
    22.         }
    23.         return "Node"
    24.     }
    25.  
    26.     errorFn = reject => err => reject(this.errFn?.(err) ?? err)
    27.  
    28.     clearTimer = opts => !!opts.timer && (clearTimeout(opts.timer), opts.timer = null)
    29.  
    30.     initAbort = (params) => {
    31.         const { controller, timer, timeout } = params
    32.         !!!timer && (params.timer = setTimeout(() => controller.abort(), timeout))
    33.         return params
    34.     }
    35.  
    36.     requestType = () => {
    37.         switch (this.envDesc()) {
    38.             case "Window":
    39.                 return this.fetch
    40.             case "Node":
    41.                 return this.http
    42.         }
    43.     }
    44.  
    45.     getDataByType = (type, response) => {
    46.         switch (type) {
    47.             case "text":
    48.             case "json":
    49.             case "blob":
    50.             case "formData":
    51.             case "arrayBuffer":
    52.                 return response[type]()
    53.             default:
    54.                 return response['json']()
    55.         }
    56.     }
    57.  
    58. }

    在后面的函数实现时，发现两个请求参数都会用到初始化参数，所以我把这几个函数又剥离出来了，以下是初始化参数的类

    1. abstract class RequestInit extends RequestBase implements IRequestInit {
    2.     constructor(origin) {
    3.         super(origin)
    4.     }
    5.     abstract fetch(url, opts): Promise<void>
    6.     abstract http(url, opts): Promise<void>
    7.     initDefaultParams = (url, { method = "GET", query = {}, headers = {}, body = null, timeout = 30 * 1000, controller = new AbortController(), type = "json", ...others }) => ({
    8.         url: urlJoin(this.fixOrigin(url), query), method, headers, body: method === "GET" ? null : jsonToString(body), timeout, signal: controller?.signal, controller, type, timer: null, ...others
    9.     })
    10.  
    11.     initFetchParams = (url, opts) => {
    12.         const params = this.initAbort(this.initDefaultParams(url, opts))
    13.         return this.reqFn?.(params) ?? params
    14.     }
    15.  
    16.     initHttpParams = (url, opts) => {
    17.         const params = this.initAbort(this.initDefaultParams(url, opts))
    18.         const options = parse(params.url, true)
    19.         return this.reqFn?.({ ...params, ...options }) ?? params
    20.     }
    21. }

    最后是将请求函数完整的实现

    1. export class Request extends RequestInit implements IRequest {
    2.     private request: Function
    3.     constructor(origin) {
    4.         super(origin)
    5.         this.request = this.requestType()
    6.     }
    7.  
    8.     fetch = (_url, _opts) => {
    9.         const { promise, resolve, reject } = defer()
    10.         const { url, ...opts } = this.initFetchParams(_url, _opts)
    11.         const { signal } = opts
    12.         promise.finally(() => this.clearTimer(opts))
    13.         signal.addEventListener('abort', () => this.errorFn(reject));
    14.         fetch(url, opts).then((response) => {
    15.             if (response?.status >= 200 && response?.status < 300) {
    16.                 return this.getDataByType(opts.type, response)
    17.             }
    18.             return this.errorFn(reject)
    19.         }).then(res => resolve(this.resFn?.(res) ?? res)).catch(this.errorFn(reject))
    20.         return promise
    21.     }
    22.  
    23.     http = (_url, _opts) => {
    24.         const { promise, resolve, reject } = defer()
    25.         const params = this.initHttpParams(_url, _opts)
    26.         const { signal } = params
    27.         promise.finally(() => this.clearTimer(params))
    28.         const req = request(params, (response) => {
    29.             if (response?.statusCode >= 200 && response?.statusCode < 300) {
    30.                 let data = "";
    31.                 response.setEncoding('utf8');
    32.                 response.on('data', (chunk) => data += chunk);
    33.                 return response.on("end", () => resolve(this.resFn?.(data) ?? data));
    34.             }
    35.             return this.errorFn(reject)(response?.statusMessage)
    36.         })
    37.         signal.addEventListener('abort', () => this.errorFn(reject)(req.destroy(new Error('request timeout'))));
    38.         req.on('error', this.errorFn(reject));
    39.         req.end();
    40.         return promise
    41.     }
    42.  
    43.     GET = (url?: IUrl, query?: IObject<any>, _?: IRequestBody | void, opts?: IRequestOptions) => {
    44.         return this.request(url, { query, method: "GET", ...opts })
    45.     }
    46.  
    47.     POST = (url?: IUrl, query?: IObject<any>, body?: IRequestBody, opts?: IRequestOptions) => {
    48.         return this.request(url, { query, method: "POST", body, ...opts })
    49.     }
    50.  
    51.     PUT = (url?: IUrl, query?: IObject<any>, body?: IRequestBody, opts?: IRequestOptions) => {
    52.         return this.request(url, { query, method: "PUT", body, ...opts })
    53.     }
    54.  
    55.     DELETE = (url?: IUrl, query?: IObject<any>, body?: IRequestBody, opts?: IRequestOptions) => {
    56.         return this.request(url, { query, method: "DELETE", body, ...opts })
    57.     }
    58.  
    59.     OPTIONS = (url?: IUrl, query?: IObject<any>, body?: IRequestBody, opts?: IRequestOptions) => {
    60.         return this.request(url, { query, method: "OPTIONS", body, ...opts })
    61.     }
    62.  
    63.     HEAD = (url?: IUrl, query?: IObject<any>, body?: IRequestBody, opts?: IRequestOptions) => {
    64.         return this.request(url, { query, method: "HEAD", body, ...opts })
    65.     }
    66.  
    67.     PATCH = (url?: IUrl, query?: IObject<any>, body?: IRequestBody, opts?: IRequestOptions) => {
    68.         return this.request(url, { query, method: "PATCH", body, ...opts })
    69.     }
    70. }

    以上代码有几个注意点：

    • node中的http请求和浏览器的fetch请求的参数不同，需要把参数初始化并做成兼容的格式

    • AbortController api在node环境下对http模块的兼容性问题，所以需要自己手动去调用超时取消请求

    • get请求与其他请求不同，带body会被浏览器屏蔽

    功能验证：

    node环境下：

    使用以下命令初始化dev项目：

    1. pnpm init
    2. pnpm i utils-lib-js

    在项目根目录下新建server.js，咱们先写个简单的get请求，内容如下：

    1. const Request = require("utils-lib-js").Request;
    2. const resource = new Request("http://127.0.0.1:1024");
    3. resource.GET("/getList").then(console.log).catch(console.log);

    之后再试试post：

    resource.POST("/getList").then(console.log).catch(console.log);

    默认的请求超时是30秒，如果需要自定义请求时间可以添加timeout

    1. resource
    2.   .GET("/getList", {}, null, {
    3.     timeout: 100,
    4.   })
    5.   .then(console.log)
    6.   .catch(console.log);

    同时也支持取消请求（请求超时和取消请求不会等待结果，直接返回reject）：

    1. const controller = new AbortController();
    2. setTimeout(() => controller.abort(), 1000);
    3. resource
    4.   .GET("/getList", {}, null, {
    5.     controller,
    6.   })
    7.   .then(console.log)
    8.   .catch(console.log);

    拦截器的使用方式

    1. const Request = require("utils-lib-js").Request;
    2. const resource = new Request("http://127.0.0.1:1024");
    3. resource
    4.   .use("request", (params) => {
    5.     console.log(params.query);
    6.     return params;
    7.   })
    8.   .use("response", (params) => {
    9.     console.log(params);
    10.     return params.length;
    11.   })
    12.   .use("error", (error) => {
    13.     console.log(error);
    14.     return error;
    15.   });
    16. resource.GET("/getList", { name: "abc" }).then(console.log)

    vite-dev环境下：

    我使用的是vite+vue，运行以下命令安装工具：

    pnpm i utils-lib-js

     然后在main.ts文件中试试，可以看到Request已经适配了fetch

    1. import { createApp } from 'vue'
    2. import './style.css'
    3. import App from './App.vue'
    4. import { Request } from "utils-lib-js"
    5.  
    6. const resource = new Request("http://127.0.0.1:1024");
    7. resource
    8.     .use("request", (params) => {
    9.         console.log(params.url);
    10.         return params;
    11.     })
    12.     .use("response", (params) => {
    13.         console.log(params);
    14.         return params.length;
    15.     })
    16.     .use("error", (error) => {
    17.         console.log(error);
    18.         return error;
    19.     });
    20. resource.GET("/getList", { name: "abc" }).then(console.log)
    21. createApp(App).mount('#app')

     

    写在最后

    以上就是文章的所有内容了，需要源码的同学可以在下面的链接中获取

    仓库： utils-lib-js: JavaScript工具函数，封装的一些常用的js函数

    源码：src/request.ts · Hunter/utils-lib-js - Gitee.com

    npm：utils-lib-js - npm

    感谢你看到了这里，如果文章对你有帮助，还请点个赞支持一下

  • 相关阅读:
    面试官：ElasticSearch是什么，它有什么特性与使用场景？
    条件随机场CRF
    Maven版本管理
    51单片机基础篇系列-定时/计数器的控制&工作方式
    io,nio,aio总结
    Mathematica求解方程——Solve、Reduce、NSolve等函数
    【Java】中Maven依赖详解
    【数据库学习】图数据库：neo4j
    Java异常、断言和日志①——Java基础
    windows下使用php-ffmpeg获取视频第一帧的图片
  • 原文地址：https://blog.csdn.net/time_____/article/details/126719561