跳到主要内容

基于Axios封装HTTP类库

· 阅读需 6 分钟
文浩Marvin

一个基于 Axios 封装 HTTP 类库

源代码 kz-http

使用方法

npm 安装

npm i kz-http -S

请求

import Http from 'kz-http'

let http = new Http()

http.get('https://www.example.com').then((res) => {
console.log(res)
})

能解决什么

axios 明明那么好用,为啥又要基于 axios 重新造一个轮子。首先不得否认的是 axios 确实好用,Github 能斩获近 90k 的 star,且基本已成为前端作为数据交互的必备工具。但是它对我所使用的环境下还是存在一定的问题,也就是我为什么要重新造一个轮子。

如果 axios 是运行在浏览器那还好说,就算你无论怎么请求,浏览器都会自动将你的所有请求中的响应包含 set-cookie 参数,提供给下一次同域下的请求。但是,Node 环境并不是浏览器环境,在 Node 环境中运行并不会自动保存 Cookie,还需要手动保存,并将 Cookie 添加至协议头给下一个请求。(如果是 Python 的话,request 有个 session 方法可以自动保存 cookie,十分方便)

一开始我是自行封装,将响应中的 set-cookie 全都存在实例对象 http.cookies 上,但封装的不彻底,如果有的网站

间请求存在跨域,那么会将携带不该属于该域下的 Cookies。于是乎,我在 github 仓库找到了一个库可达到我的目的

3846masa/axios-cookiejar-support: Add tough-cookie support to axios. (github.com)

具体安装可以直接点击链接查看,这里贴下我之前的封装代码

const tough = require('tough-cookie');
const axiosCookieJarSupport = require('axios-cookiejar-support').default;
axiosCookieJarSupport(axios);

class Http {
public cookieJar;
public instance: AxiosInstance;
construction() {
this.cookieJar = new tough.CookieJar(null, { allowSpecialUseDomain: true });
this.instance = axios.create({
jar: this.cookieJar,
ignoreCookieErrors: false,
withCredentials: true,
});
}
}

这样 axios 就会自动将响应中的 set-cookie 封装起来,供下次使用

但是正是由于导入了这个包,导致每次请求都需要处理,就会导致请求速度变慢,实测大约是在 100ms 左右,同时导入这个包之后,实例化的对象都将会携带对应 cookies,想要删除又得对应 Url,于是决定自行封装相关代码可查看 request 方法,实测下来大约有 10ms 左右的差距(前提都通过创建实例来请求),不过有个缺陷,我封装的代码是不进行同源判断的,如何你当前站点请求的是 api1.test.com,获取到 cookie1,那么请求 api2.test.com 的时候也会将 cookie1 携带,这边不做判断是不想在请求的时候耗费时间,比如网页与手机协议,一般这种情况建议实例化两个对象,如

let http_api1 = new Http()
let http_api2 = new Http()

请求失败无法自动重试

在高并发的情况下,偶尔会出现请求超时,请求拒绝的情况,但是默认下 axios 是不支持自动重试请求的,不过可以借助插件axios-retry来达到这个目的

const axiosRetry = require('axios-retry')

class Http {
constructor(retryConfig?) {
this.instance = axios.create()

if (retryConfig) {
axiosRetry(this.instance, {
retries: retryConfig.retry, // 设置自动发送请求次数
retryDelay: (retryCount) => {
return retryCount * retryConfig.delay // 重复请求延迟
},
shouldResetTimeout: true, // 重置超时时间
retryCondition: (error) => {
if (axiosRetry.isNetworkOrIdempotentRequestError(error)) {
return true
}

if (error.code == 'ECONNABORTED' && error.message.indexOf('timeout') != -1) {
return true
}
if (['ECONNRESET', 'ETIMEDOUT'].includes(error.code)) {
// , 'ENOTFOUND'
return true
}
return false
},
})
}
}
}

这边判断重新发送请求条件是连接拒绝,连接重置,和连接超时的情况。

配置拦截器

有时候一个网站的协议是这样的,每一条 Post 都自动将所有参数进行拼接,然后进行 MD5 加密,并添加为 sign 参数,于是,不得不给每一条请求都进行这样的操作,那么有没有什么能在每次请求的时候,都自动的对参数进行 MD5 加密。如果使用过 axios 来配置过 JWT 效验,那自然就会熟悉给每条请求协议头都携带 JWT 数值。同样的,这里的加密例子同样使用,具体配置实例对象 http 的请求拦截器即可,如

let http = new Http()

// axios实例instance是公开的
http.instance.interceptors.request.use(
(config) => {
// 执行每条请求都要处理的操作
return config
},
(error) => {},
)

同样的,响应拦截器也同理,例如请求返回的响应都进行加密处理,那么就可以通过响应拦截器进行统一解密,这里就不做过多描述,具体场景具体分析。

封装一些常用方法

比如设置伪造 IP(setFakeIP),自动补全 referer 和 orgin 参数,禁止重定向等等,更详细的查看源码便可

发布 npm 包

如果要让别人使用的话,总不可能让他去下载源码然后编译吧,这里就借助 npm。

提示

在使用 npm 之前,请先使用npm install -g npm@latest升级为最新版,否则可能会提示 ERR! 426 Upgrade Required。原文 The npm registry is deprecating TLS 1.0 and TLS 1.1 | The GitHub Blog

创建 npm 账号,创建 package.json

package.json
{
"name": "kz-http",
"version": "0.1.0",
"description": "An HTTP class library based on axios",
"main": "dist/index.js",
"scripts": {
"build": "tsc"
},
"author": "wenhao",
"license": "ISC",
"dependencies": {
"axios": "^0.21.1",
"axios-retry": "^3.1.9"
},
"devDependencies": {
"typescript": "^4.3.5"
},
"repository": {
"type": "git",
"url": "git+https://github.com/wenhao/kz-http.git"
},
"keywords": ["node", "axios", "http"]
}

然后通过npm login登录 npm 账号,接着输入npm publish --access public发布即可

发布的是要注意以下几点

  • 如果 npm 镜像必须是官方的,否则无法登录,镜像还原

    npm config set registry https://registry.npmjs.org/

    查看镜像配置地址

    npm get registry
  • 如果包有重名,那么就无法发布,就必须要要改名

  • 邮箱必须要验证(会接受一条下图邮箱),不然就会发布失败 image-20210826212258752

  • 请勿随意删包,否则同名的包将需要 24 小时后才能发布(亲测)

    npm ERR! 403 403 Forbidden - PUT http://registry.npmjs.org/kz-http - kz-http cannot be republished until 24 hours have passed.

发布完成后,别人只需要通过npm i kz-http就可成功将模块下载至本地 node_modules 文件夹下

Loading Comments...