自己动手封装axios通用方法并上传至私有npm仓库:详细步骤与实现指南

文章目录

      • 一、构建方法
        • 1、api/request.js
        • 2、api/requestHandler.js
        • 3、api/index.js
      • 二、测试方法
        • 1、api/axios.js
        • 2、main.js
        • 3、app.vue
        • 4、vue.config.js
        • 5、index.html
      • 三、打包
        • 1、配置package.json
        • 2、生成库包
        • 3、配置发布信息
        • 4、发布
      • 四、使用
        • 1、安装
        • 2、使用
      • 五、维护
        • 1、维护和更新
        • 2、注意事项

一、构建方法

  • 确定工具库的需求和功能:在开始构建工具库之前,你需要明确你的工具库需要包含哪些方法及工具,以及这些工具或方法应该具备哪些功能。这有助于你更好地规划你的开发工作。

  • 编写工具代码:使用你熟悉的前端框架(如React、Vue等)编写工具代码。确保你的代码具有良好的可读性和可维护性,并遵循相关的编码规范。

  • 创建工具库的结构:为了组织和管理你的组件,你需要创建一个清晰的目录结构。这可以包括组件的源代码、样式文件、文档和示例等。

1、api/request.js

这里是axios操作的封装

import axios from 'axios'
import {replayDefence,encryptRequest,distortDefence,requestTimeOut
} from './requestHandler'
axios.defaults.timeout = requestTimeOut || 20000; //超时响应
axios.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8'; // 配置请求头
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'; // 区分ajax请求还是普通请求
axios.defaults.withCredentials = true; // axios 默认不发送cookie,需要全局设置true发送cookieclass HttpRequest {constructor() {this.instance = axios.create()this.interceptors()}interceptors() {// request拦截器this.instance.interceptors.request.use((config) => {if (config.url) {// 防重放replayDefence(config);// 报文加密encryptRequest(config);// 防篡改distortDefence(config);return config;}}, error => {return Promise.reject(error);})// respone拦截器this.instance.interceptors.response.use(async (res) => {if (res.status === 200) {// return Promise.resolve(res)return res} else {return Promise.reject(res)}}, error => {return Promise.reject(error)})}/*** 提交数据,同时支持  data 和 params* @param {*} url * @param {*} params * @returns */post(url, params = {}) {return this.instance({url: url,method: 'post',data: params})}/*** 获取数据,只支持 params 传参* @param {*} url * @param {*} params * @returns */get(url, params = {}) {return this.instance({url: url,method: 'get',params: params})}/*** 更新数据,同时支持  data 和 params* @param {*} url * @param {*} params * @returns */put(url, params = {}) {return this.instance({url: url,method: 'put',data: params})}/*** 删除数据,只支持 params传参* @param {*} url * @param {*} params * @returns */delete(url, params = {}) {return this.instance({url: url,method: 'delete',params: params})}
}export default HttpRequest
2、api/requestHandler.js

这里是请求拦截中的方法的抽离

const winConfig = window._CONFIG || {}
const {urlRandom,tampering,SM4Rncrypt,timeout
} = winConfigexport const requestTimeOut = timeout/*** 防重放,这里添加时间戳和6位随机数* @param {*} config */
export const replayDefence = (config) => {if (urlRandom && config.url) {const nonce = Math.floor(Math.random() * 1000000)config.params = {_t: Date.parse(new Date()),nonce,...config.params}}
}/*** 报文加密,这里使用base64代替加密,你可以替换成SM4加密* @param {*} config */
export const encryptRequest = (config) => {if (SM4Rncrypt && config.url && config.data) {if (['post', 'put', 'delete'].includes(config.method)) {config.headers["Content-Type"] = "application/json";let jsonStr = JSON.stringify(config.data);config.data = btoa(jsonStr);}}
}/*** 防篡改,这里是btoa(url+params+btoa(data)),你可以再加盐* @param {*} config */
export const distortDefence = (config) => {if (tampering && config.url) {let validCode = `${config.url}`if (config.params) {for (let key in config.params) {validCode += `&${key}=${config.params[key]}`}}if (config.data && config.method != 'get') {validCode += SM4Rncrypt ? config.data : JSON.stringify(config.data);}console.log('validCode:', validCode)config.headers["sign"] = btoa(validCode)}
}
3、api/index.js

这里文件首页

import HttpRequest from "./request";const axios = new HttpRequest()export default axios

二、测试方法

编写文档和示例:为你的工具方法编写清晰的文档和示例,这有助于其他开发者理解和使用你的工具库。

1、api/axios.js

这个是使用时的文件。现在测试用

import axios from "./index";const baseURL = "";//手机号归属地查询
export const getPhone = (params) => axios.post(baseURL + '/v2/phone', params)//历史上的今天
export const getHistory = (params) => axios.post(baseURL + '/v2/history', params)// Bing每日壁纸
export const getBing = (params) => axios.post(baseURL + '/v2/bing', params)// 用户IP信息
export const getIp = (params) => axios.post(baseURL + '/v2/getip', params)//随机颜色
export const getColor = (params) => axios.get(baseURL + '/v2/color', params)
2、main.js

这个是使用时的文件。现在测试用

import * as api from './api/axios'
Vue.prototype.$apis = api
3、app.vue

这个是使用时的文件。现在测试用

console.log(this.$apis)this.$apis.getPhone({ tel: 13225750729 }).then(res => {console.log(res.data)})this.$apis.getHistory({}).then(res => {console.log(res.data)})this.$apis.getIp({}).then(res => {console.log(res.data)})this.$apis.getColor({}).then(res => {console.log(res.data)})
4、vue.config.js

配置代理

module.exports = {productionSourceMap: false,devServer: {proxy: 'https://tenapi.cn/'}
}
5、index.html

首页添加全局变量配置信息

window._CONFIG = {urlRandom: true, //防重放tampering: true, //防篡改SM4Rncrypt: false, //报文加密timeout: 10000 //超时时间
}

三、打包

1、配置package.json

添加打包到库命令

{"scripts": {"plugin": "vue-cli-service build --target lib --name zouAxion --dest zouAxion src/api/index.js"},
}
2、生成库包

打包工具库:运行打包命令,将你的工具库打包成一个npm包。这通常会在你的项目根目录下生成一个目录,其中包含打包后的文件。

npm run plugin

这是生成的zouAxion文件夹。

在这里插入图片描述

3、配置发布信息

配置package.json:在项目的根目录下创建一个package.json文件,并配置相关的元信息,例如包的名称、版本、描述、入口文件等。确保你的包名在npm上是唯一的,尤其是如果你打算将它发布到公共npm仓库。

注意:如果你的npm仓库是私有的,你可能需要在package.json中添加一个publishConfig字段来指定你的私有仓库地址。

在zouAxion文件夹里面创建package.json文件,配置发布信息。

{"name": "zou-axion","version": "0.1.2","private": false,"license": "MIT","description": "今天我发布一个zouAxion插件","main": "zouAxion.umd.min.js","scripts": {},"dependencies": {},"devDependencies": {}}

在这里插入图片描述

4、发布
  • 配置npm仓库:如果你还没有一个私有的npm仓库,你需要先搭建一个。你可以使用Verdaccio等工具来快速搭建一个私有的npm仓库。

  • 配置npm源:在你的本地开发环境中,将npm的源配置为你的私有仓库地址。这可以确保当你发布组件库时,它会被上传到你的私有仓库而不是公共的npm仓库。

  • 登录到npm仓库:在终端中运行npm login命令,并按照提示输入你的npm仓库的用户名、密码和邮箱地址。这将使你能够发布包到你的私有仓库。

  • 发布工具库:在终端中运行npm publish命令来发布你的工具库。这会将你的工具库上传到你的私有npm仓库中。

配置npm源

npm set registry http://localhost:4873/

在zouAxion文件夹里面执行发布命令

npm publish

在这里插入图片描述

四、使用

一旦你的工具库被发布到私有npm仓库,你就可以在其他项目中使用它了。只需在项目中使用npm install命令来安装你的工具库,然后按照文档中的说明来使用它即可。

跟使用axios的方法一样。

1、安装
npm install axios
npm install zou-axios

在这里插入图片描述

2、使用

api/axios.js

import axios from "zou-axios";
const baseURL = "";
//历史上的今天
export const getHistory = (params) => axios.post(baseURL + '/v2/history', params)

main.js

import * as api from './api/axios'
Vue.prototype.$apis = api

app.vue

this.$apis.getHistory({}).then(res => {console.log(res.data)
})

五、维护

1、维护和更新

随着项目的进行,你可能需要对你的工具库进行维护和更新。这包括修复bug、添加新功能、更新文档等。在每次更新后,记得重新打包并发布你的工具库,以便其他项目能够使用到最新的版本。

2、注意事项
  • 版本控制:确保你的工具库使用版本控制(如Git),以便你可以追踪和管理不同版本的代码。

  • 测试:在发布工具库之前,确保进行充分的测试,以确保其稳定性和可用性。

  • 文档和示例:持续更新和维护你的文档和示例,以帮助其他开发者更好地理解和使用你的工具库。

  • 记得在开发过程中保持代码质量和可维护性,并定期更新和维护你的组件库。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/806129.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

M1 Flutter SDK的安装和环境配置

前言 作为iOS 开发,观望了许久的Flutter ,还是对它下手了,不是故意要卷,没办法工作需要!既然要学Flutter,首先就得配置Flutter的相关环境,由于我的是M1 芯片的电脑,记录下来配置过程…

spring boot 集成 flyway依赖 做数据库迁移,让部署没烦恼

flyway 是一个敏捷工具&#xff0c;用于数据库的移植。采用 Java 开发&#xff0c;支持所有兼容 JDBC 的数据库。 主要用于在你的应用版本不断升级的同时&#xff0c;升级你的数据库结构和里面的数据。 还是直接上代码 第一步&#xff1a; <!-- Flyway 数据库迁移 依赖 他…

python爬虫-------JsonPath(第十九天)

&#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; &#x1f388;&#x1f388;所属专栏&#xff1a;python爬虫学习&#x1f388;&#x1f388; ✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天…

【一学就会】(一)C++编译工具链——基于VSCode的CMake、make与g++简单理解与应用示例

目录 一、CMake、make与g 1、名词辨析 2、孰优孰劣 二、应用示例 1、工具类安装与配置 1&#xff09;VSCode安装与配置 2&#xff09;CMake下载与安装 3&#xff09;MinGW-W64下载与安装 A、科学上网法 B、无需科学上网法 4&#xff09;VSCode推荐插件 A、c/c编译环…

Linux/Ubuntu/Debian中与进程和系统资源有关的命令top/ps

top命令是Linux系统中非常实用的一个工具&#xff0c;其主要功能是展示当前系统中资源使用情况最高的进程列表。通过这个命令&#xff0c;我们可以一目了然地看到哪些进程正在消耗大量的CPU、内存等资源。top命令默认每3秒更新一次数据&#xff0c;提供了实时的系统资源状态&am…

【Qt 学习笔记】QWidget的geometry属性及window frame的影响

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ QWidget的geometry属性 文章编号&#xff1a;Qt 学习笔记 / 16 文章目…

BK-SDM读图片逻辑-评估结果FID逻辑

以inherit为例 这是借助bksdm的代码用于我的A-sdm的生成 bksdm中2个关键路径是 src/genetate.py script/eval_scores.sh 一 以generate.py文件进行生成 借助ms-coco的csv文件里面的30K个提示词和图片名字&#xff0c;来生成图片&#xff0c;并保存 share/huanggao/zjc/code_i2…

【智能算法】省时方便,智能算法统计指标——一键运行~

目录 1.常用统计指标2.参数统计检验3.结果展示4.自定义修改测试框架 1.常用统计指标 测试智能算法性能时&#xff0c;常常会用到以下5种常用指标&#xff0c;简单不赘述&#xff1a; 最优值、最差值、均值、中位数、标准差 2.参数统计检验 单纯依靠常用统计指标说服力不足&…

07 Php学习:运算符

PHP 算术运算符 在 PHP 中&#xff0c;算术运算符用于执行基本的数学运算&#xff0c;包括加法、减法、乘法、除法、取余数&#xff0c;负数运算、取反和并置运算。以下是这些运算符的详细解释和示例&#xff1a; 加法运算符 &#xff1a;用于将两个数值相加。 $a 5; $b 3;…

初识--数据结构

什么是数据结构&#xff1f;我们为什么要学习数据结构呢....一系列的问题就促使我们不得不了解数据结构。我们不禁要问了&#xff0c;学习C语言不就够了吗&#xff1f;为什么还要学习数据结构呢&#xff1f;这是因为&#xff1a;数据结构能够解决C语言解决不了的问题&#xff0…

【Java基础题型】矩阵的对角线求和

一、题目-矩阵 求一个33矩阵对角线元素之和。 输入格式 矩阵 输出格式 主对角线 副对角线 元素和 样例输入 1 2 3 1 1 1 3 2 1 样例输出 3 7 二、参考的知识 这里给大家送点英语单词&#xff0c;记得学习&#xff1a; p r i m a r y. adj.主要的&#xff1b;初…

软考中级之软件设计师---知识点汇总总结

软考中级之软件设计师---知识点汇总总结 软考介绍资格设置证书样本 计算机组成原理操作系统1. 进程的三态模型2. 磁盘调度算法 计算机网络1. 网络的分类2. 各层的互连设备3. 网络模型&#xff0c;协议簇4. 传输层协议TCP、UDP4.1 TCP (Transmission Control Protocol,传输控制协…

day77 JSPServlet

知识点&#xff1a; 1Web工程 2JSP是什么&#xff1f;JSP页面包含哪些内容&#xff1f;JSP页面执行原理 3JSP九大内置对象&#xff0c;及四个作用域 4什么是SERVLET&#xff1f;及servlet相关API 5MVC模型 6EL表达式及JSTL标签库的使用 7在JSP页面实现分页和多条件查询 …

【UE5 C++】访问修饰符public/protected/private继承

限制类与类之间访问级别的方法 public 在类中创建一个public的部分&#xff0c;即" public: "&#xff0c;public之下的所有内容都是公共的,可以在类之间访问 private&#xff08;最常见&#xff09; 如若没有指明修饰符&#xff0c;则默认为private 不能在类的外…

【LAMMPS学习】七、加速性能(4)加速器包

7. 加速性能 7.1.基准测试 7.2.测试性能 7.3.通用技巧 7.4.加速器包 LAMMPS 中添加了各种pair_style、fixes、compute 和其他命令的加速版本&#xff0c;其运行速度通常比标准非加速版本更快。有些需要您的系统上存在适当的硬件&#xff0c;例如GPU 或 Intel Xeon Phi 协处…

每日OJ题_BFS解决FloodFill②_力扣200. 岛屿数量

目录 力扣200. 岛屿数量 解析代码 力扣200. 岛屿数量 200. 岛屿数量 难度 中等 给你一个由 1&#xff08;陆地&#xff09;和 0&#xff08;水&#xff09;组成的的二维网格&#xff0c;请你计算网格中岛屿的数量。 岛屿总是被水包围&#xff0c;并且每座岛屿只能由水平方…

聊聊自己12岁车龄的福克斯

1. 2005年&#xff0c;国内进入了 福克斯 ( 参数 | 询价 ) 这台车&#xff0c;中间经历了两次换代&#xff0c;而我自己的这台车则是第一批进入国内的福克斯&#xff0c;它的到来颠覆了大家当时对汽车设计的印象&#xff0c;在十年前家用车都是捷达、桑塔纳等那些古板油腻的车…

全球变暖蓝桥杯2018省赛真题

全球变暖蓝桥杯2018省赛真题 DFS大法 全球变暖 #include <bits/stdc.h> using namespace std; #define int long long bool flag; char a[1010][1010]; int cnt,n,ans0,pre_ans0,d[4][2] {1,0,-1,0,0,1,0,-1}; void dfs(int x,int y){if(x>n||x<0||y>n||y<…

德勤:《中国AI智算产业2024年四大趋势》

2023年《数字中国建设整体布局规划》的发布&#xff0c;明确了数字中国是构建数字时代竞争优势的关键支撑&#xff0c;是继移动互联网时代以来经济增长新引擎。当我们谈论数字中国的构建&#xff0c;不仅仅是在讨论一个国家级的技术升级&#xff0c;而是关乎如何利用数字技术来…

操作系统(第四周 第一堂)

目录 回顾 进程调度&#xff08;process schedule&#xff09; 进程角度 计算机整体——调度队列 队列图 调度程序 总结 回顾 上一篇文章的重点只有一个————进程 对进程的了解包含以下几个方面&#xff1a;1、程序如何变为进程 2、进程在内存中的存储形式 3、进…