封装axios的两种方式

作为前端工程师,经常需要对axios进行封装以满足复用的目的。在不同的前端项目中使用相同的axios封装有利于保持一致性,有利于数据之间的传递和处理。本文提供两种对axios进行封装的思路。

1. 将请求方式作为调用参数传递进来

  1. 首先导入了axios, AxiosInstance和AxiosResponse模块,用于创建一个http请求的实例和处理响应结果。
  2. 定义了一个getBaseUrl函数,用于获取请求的基础URL。
  3. 创建了httpProto实例,使用axios.create方法进行创建。并配置了请求的超时时间为5000ms,不携带凭证,设置请求的Content-Type为application/json;charset=UTF-8,并允许跨域访问。
  4. 添加了一个请求拦截器,通过httpProto.interceptors.request.use方法,对请求进行处理。首先使用getBaseUrl函数获取基础URL,并将其添加到请求的baseURL属性中。然后通过getToken函数获取凭证,如果凭证存在,则将其添加到请求的Authorization头部字段中。最后返回处理后的请求配置。
  5. 添加了一个响应拦截器,通过httpProto.interceptors.response.use方法,对响应进行处理。首先获取响应的data字段,然后判断data.result的值,如果为0则表示请求成功,直接返回data。否则将返回一个失败的Promise,reject的值为data。
  6. 定义了一个http函数,用于发送请求。这个函数接收一个method参数和其他参数(rest),然后通过httpProto[method](...rest)的形式调用httpProto实例的对应方法发送请求。
  7. 定义了一个urls对象,用于存储可供使用的URL路径,其中有一个示例路径example。
  8. 定义了一个methods对象,用于存储常用的请求方法名称,包括get、post和delete

完整的代码如下所示:

import axios, { AxiosInstance, AxiosResponse } from "axios";
import { getToken } from "./token";// 获取请求的基础URL
const getBaseUrl = () => `http://${window.constant.serverIp}:8888}`;// 创建http请求的实例对象
const httpProto: AxiosInstance = axios.create({timeout: 5000,withCredentials: false,headers: {'Content-Type': 'application/json;charset=UTF-8','Access-Control-Allow-Origin': '*',}
});// 添加请求拦截器
httpProto.interceptors.request.use((config: any) => {// 配置baseURLconfig.baseURL = getBaseUrl();// 获取凭证const token = getToken();if (token) {// 如果有凭证就加上此凭证config.headers.Authorization = `${token}`;}return config;
}, (error) => {return Promise.reject(error)
});// 添加响应拦截器
httpProto.interceptors.response.use((response: AxiosResponse) => {const { data } = response// 统一处理响应结果if (data.result === 0) {return data;} else {return Promise.reject(data);}},(error) => {// 统一处理错误信息return Promise.reject(error);}
);// 将httpProto实例,也就是AxiosInstance实例对象封装起来
const http = (method: string, ...rest: any) => {return httpProto[method](...rest);
}// 可供使用的urls
const urls = {example: `/prod/example`,
}const methods = {get: 'get',post: 'post',delete: 'delete',
}export { http, urls, methods };

2. 直接调用某请求方式对应的请求方法

  1. 导入了axios模块的相关类型和函数。
  2. 定义了printLog函数,用于处理日志输出
  3. 定义了IResponse接口,表示请求响应对象的格式。
  4. 定义了RequestParams接口,表示发送请求的配置项的格式。
  5. 定义了IHttp接口,表示封装对象支持的请求方式/方法。
  6. 定义了req对象,用于向外暴露支持的请求方法。
  7. 定义了methods数组,表示支持的请求方式类型。
  8. 使用forEach方法遍历methods数组,逐步构造req对象上的各个方法
  9. 在每个方法的构造过程中,进行以下步骤:
    • 参数合并,将默认的responseType设置为'json'。
    • 从params对象中解构需要的参数。
    • 使用axios.create方法创建一个AxiosInstance实例对象。
    • 创建请求头对象,并设置一些常用的请求头信息。
    • 构造请求配置对象AxiosRequestConfig
    • 根据请求方式对请求配置进行修正,主要是将data赋值到相应的字段中。
    • 添加请求拦截器,并在成功和失败的情况下返回配置。
    • 添加响应拦截器,并在成功和失败的情况下返回处理结果。
    • 构造请求成功的回调函数,对返回数据进行格式化的操作。
    • 构造请求失败的回调函数,处理错误日志和断网情况。
    • 发送请求并将请求结果作为函数的返回值。
  10. 默认导出req对象。

以下是加上注释的完整代码:

import axios, { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios';// 日志处理,可定制
const printLog = console;// 作为被Promise包裹的请求响应对象的格式
export interface IResponse {code: number;msg: string;result: {lastOperaTime: number;data: any;};
}// 发送请求的配置项的格式
export interface RequestParams {url: string;baseUrl?: string;data?: object;filter?: boolean;responseType?: 'arraybuffer' | 'blob' | 'document' | 'json' | 'text' | 'stream';headers?: any;timeout?: number;
}// 封装对象支持的请求方式/方法
interface IHttp {get?: (params: RequestParams) => Promise<any>;post?: (params: RequestParams) => Promise<any>;put?: (params: RequestParams) => Promise<any>;patch?: (params: RequestParams) => Promise<any>;delete?: (params: RequestParams) => Promise<any>;
}// 支持的请求方式类型
export type HttpMethod = 'get' | 'post' | 'put' | 'patch' | 'delete';// 向外暴露出去的对象
const req: IHttp = {};// 支持的请求类型
const methods: HttpMethod[] = ['get', 'post', 'put', 'patch', 'delete'];// 遍历methods数组,逐步构造req对象
methods.forEach((_m: HttpMethod) => {// 使用遍历的方式对req对象上的各个方法进行构造req[_m] = (params: RequestParams) => {// 1. 构造参数合并params = {...params,responseType: params.responseType || 'json',};// 2. 从使用对象方法的形参上结构出必要的参数const {url, // 服务器地址data, // 有效载荷filter = true, // 过滤器responseType, // 返回类型timeout, // 超时时间} = params;// 3. 使用axios创建AxiosInstance实例对象const instance = axios.create({baseURL: params.baseUrl ?? `http://${window.location.hostname}`,timeout,});// 4. 创建请求头对象const headers = {lastOperaTime: Date.now(), // 时间戳token: getToken(), // 凭证lang: getLocalLocale(), // 语言Accept: 'application/json', // 接受返回数据的类型'Content-Type': 'application/json; charset=utf-8', // 内容格式};// 5. 请求配置const axiosConfig: AxiosRequestConfig = {method: _m, // 请求方法url, // 服务器地址headers: {// 合并请求头...headers,...(params.headers || {}),},responseType, // 返回值类型};// 6. 针对不同的请求类型需要对请求配置进行修正if (data) {// 对于有效载荷,不同的请求方式携带信息的方式是不同的,在这里做了区分if (_m === 'get') {axiosConfig.params = data;} else if (data instanceof FormData) {axiosConfig.data = data;} else {axiosConfig.data = data;}}// 添加请求拦截器instance.interceptors.request.use(// 占位(config: any) => {return config;},// 失败则返回失败(error: any) => {return Promise.reject(error);});// 7. 添加响应拦截器instance.interceptors.response.use(// 成功的回调,将发起请求的参数作为第二参数回传(res: any) => handleSuccess(res, params),// 失败的回调,将发起请求的参数作为第二参数回传(err: any) => handleError(err, params));// 8. 构造请求成功的回调函数 -- 主要是对返回数据进行格式化的操作function handleSuccess(response: AxiosResponse<IResponse>, requestParams: RequestParams) {if (response.data) {// 解构数据const { code, msg, result } = response.data;if (code !== 0) {printLog.error(msg);}return filter ? result?.data ?? result : response.data;} else {printLog.error('incorrect data format');return response.data;}}// 9. 构造请求失败的回调函数function handleError(err: AxiosError, requestParams: RequestParams) {if (err.response) {printLog.error(`api: ${requestParams.url}: ${err.response.status}`);}if (err instanceof Error) {if (err.message) {printLog.error(err.message);}}if (!window.navigator.onLine) {// 处理断网情况printLog.error('netwrok error');}return Promise.reject(err);}// 10. 发送请求并将请求结果(Promise对象)作为函数的返回值return instance.request(axiosConfig);};
});export default req;

 给大家推荐一个实用面试题库

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:web前端面试题库

 

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

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

相关文章

对长度为n的顺序表L,编写一个时间复杂度为O(n),空间复杂度为O(1)的算法,该算法删除线性表中的所有值为x的数据元素

对长度为n的顺序表L&#xff0c;编写一个时间复杂度为O(n)&#xff0c;空间复杂度为O(1)的算法&#xff0c;该算法删除线性表中的所有值为x的数据元素 算法思路&#xff1a; 用count标记遇到x的次数&#xff0c;每次遇到x&#xff0c;count 遇到非x的元素&#xff0c;把它前移…

vue3后台管理系统之顶部tabbar组件搭建

1.1静态页面搭建 <template><div class"tabbar"><div class"tabbar_left"><!-- 面包屑 --><Breadcrumb /></div><div class"tabbar_right"><!-- 设置 --><Setting /></div></di…

自动驾驶的未来展望和挑战

自动驾驶技术是一项引人瞩目的创新&#xff0c;将在未来交通领域产生深远影响。然而&#xff0c;随着技术的不断演进&#xff0c;自动驾驶也面临着一系列挑战和障碍。本文将探讨自动驾驶的未来发展方向、技术面临的挑战&#xff0c;以及自动驾驶对社会和环境的潜在影响。 自动驾…

封装一个vue3 Toast组件,支持组件和api调用

先来看一段代码 components/toast/index.vue <template><div v-if"isShow" class"toast">{{msg}}</div> </template><script setup> import { ref, watch } from vue const props defineProps({show: {type: Boolean,def…

docker搭建个人镜像仓库

docker搭建个人镜像仓库 安装registry mkdir docker-registry cd docker-registry mkdir registry mkdr auth vim docker-compose.ymldocker-compose.yml的内容如下&#xff1a; version: 3 services:registry:image: registrycontainer_name: registryvolumes:- ./registry…

GPT带我学-设计模式-10观察者模式

1 请你介绍一下观察者模式 观察者模式&#xff08;Observer Pattern&#xff09;是一种设计模式&#xff0c;它定义了对象之间的一对多依赖关系&#xff0c;当一个对象&#xff08;被观察者&#xff09;的状态发生改变时&#xff0c;所有依赖于它的对象&#xff08;观察者&…

Canvas的缓冲区

Canvas的缓冲区 canvas的绘制缓冲区和显示缓冲区理解为两个容器&#xff0c;它们用于存储绘制结果。绘制缓冲区是用于存储渲染管线生成的像素数据&#xff0c;而显示缓冲区是绘制缓冲区最终的存储位置。 绘制缓冲区&#xff08;Drawing Buffer&#xff09;: 它是在 canvas 元…

JVM 类的加载子系统

文章目录 类的加载过程加载阶段链接阶段初始化 类的加载器测试代码中获取对应的加载器获取加载器加载的路径不同类对应的加载器自定义加载器自定义加载器的方式 获取类的加载器的方式双亲委派机制双亲委派机制的好处 Java 的 SPI 机制1. 接口定义2. 具体实现3. 配置 META-INF/s…

Redis中设置Hash数据类型的过期时间

1 方案 可以先对key进行赋值&#xff0c;然后对key设置一个过期时间。 &#xff08;1&#xff09;依赖 <dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId><version>2.7.3</version></dependency>…

Kubernetes (K8S)概述

目录 1、K8S 是什么&#xff1f; 1.1 作用 1.2 由来 1.3 含义 1.4 官网 2、为什么要用 K8S? 2.1 K8S 解决了裸跑Docker 的若干痛点 2.2 K8S主要功能如下 2.3 K8S 的特性 3、Kubernetes 集群架构与组件 3.1 核心组件 3.1.1 Master 组件 3.1.2 控制器主要包括 3.1…

Spring Cloud Gateway 路由构建器的源码分析

Spring Cloud Gateway 路由构建器的源码分析 文章目录 1. 路由构建器的入口2. 创建路由规则3. 设置路由规则和属性4. 路由过滤器的设置5. 构建和获取路由规则&#xff1a;6. 实例化路由构建器&#xff1a;8. 路由构建器的源码分析8.1 RouteLocator接口8.2 RouteLocatorBuilder…

判断日期区间或季节等

使用JavaScript的Date对象来获取当前日期&#xff0c;并通过比较判断是否在指定的日期范围内&#xff08;如3月16日-9月15日&#xff09;。以下是一个示例代码&#xff1a; var currentDate new Date(); // 获取当前日期 var startRange new Date(currentDate.getFullYear()…

springBoot与Vue共同搭建webSocket环境

欢迎使用Markdown编辑器 你好&#xff01; 这片文章将教会你从后端springCloud到前端VueEleementAdmin如何搭建Websocket 前端 1. 创建websocket的配置文件在utils文件夹下websocket.js // 暴露自定义websocket对象 export const socket {// 后台请求路径url: ,websocketCo…

Android前台服务和通知

前台服务 Android 13及以上系统需要动态获取通知权限。 //android 13及以上系统动态获取通知权限 if (Build.VERSION.SDK_INT > Build.VERSION_CODES.Q) {checkPostNotificationPermission(); } private void checkPostNotificationPermission() {if (ActivityCompat.chec…

信息检索与数据挖掘 | 【实验】排名检索模型

文章目录 &#x1f4da;实验内容&#x1f4da;相关概念&#x1f4da;实验步骤&#x1f407;分词预处理&#x1f407;构建倒排索引表&#x1f407;计算query和各个文档的相似度&#x1f407;queries预处理及检索函数&#x1f525;对输入的文本进行词法分析和标准化处理&#x1f…

【Docker】Dockerfile使用技巧

开启Buildkit BuildKit是Docker官方社区推出的下一代镜像构建神器&#xff0c;可以更加快速&#xff0c;有效&#xff0c;安全地构建docker镜像。 尽管目前BuildKit不是Docker的默认构建工具&#xff0c;但是完全可以考虑将其作为Docker&#xff08;v18.09&#xff09;的首选…

一个注解让 Spring Boot 项目接口返回数据脱敏

1 背景 需求是某些接口返回的信息&#xff0c;涉及到敏感数据的必须进行脱敏操作 2 思路 ①要做成可配置多策略的脱敏操作&#xff0c;要不然一个个接口进行脱敏操作&#xff0c;重复的工作量太多&#xff0c;很显然违背了“多写一行算我输”的程序员规范。思来想去&#xff…

css如何将border线加到元素内部,占内边距,不占外边距

要将边框线添加到元素的内部&#xff0c;可以使用CSS的box-sizing属性和内边距&#xff08;padding&#xff09;来实现。 首先&#xff0c;将元素的box-sizing属性设置为border-box。这会使元素的宽度和高度包括边框和内边距在内。例如&#xff1a; .element {box-sizing: bo…

软件工程与计算总结(二十三)软件工程职业基础

本系列最后一更&#xff0c;《软计》系列总结的大结局&#xff01;本栏目告一段落&#xff0c;之后会结合真题和练习题再发布新的总结~ 往期链接&#xff1a; 《软件工程与计算》总结 一.软件工程职业 1.行业的发展 20世纪50年代&#xff1a;计算机还是研究型机器&#xff…

C++中显示构造和隐式构造

截图来源于C primerplus 第六版。