【JavaScript】axios 二次封装拦截器(接口、实例、全局)

news2024/11/22 22:04:48

学习 coderwhy 老师结合 ts 二次封装 axios

目录结构

在这里插入图片描述

config

config\index.ts

// export const BASE_URL = "http://codercba.com:9002";
export const TIME_OUT = 10000;

// 1. 根据环境变量区分接口地址
// let BASE_URL: string;
// if (process.env.NODE_ENV === "development") {
//   BASE_URL = "http://codercba.com:9002"
// } else {
//   BASE_URL = "http://codercba.com:9002"
// }

// 2. 通过创建 .env 文件来自定义环境变量
const BASE_URL  = process.env.REACT_APP_BASE_URL

export { BASE_URL }

request

request\index.ts

import axios, {AxiosInstance, InternalAxiosRequestConfig} from "axios";
import { RequestConfig } from "@/service/request/type";

class MyRequest {
  instance: AxiosInstance;

  constructor(config: RequestConfig) {
    this.instance = axios.create(config);

    // 1. 全局拦截器和实例拦截器
    this.instance.interceptors.request.use(
      function (config) {
        console.log("全局请求成功的拦截");
        return config;
      },
      function (error) {
        console.log("全局请求失败的拦截");
        return Promise.reject(error);
      }
    );

    this.instance.interceptors.response.use(
      function (response) {
        console.log("全局响应成功的拦截");
        return response.data;
      },
      function (error) {
        console.log("全局响应失败的拦截");
        return Promise.reject(error);
      }
    );

    // 2. 配置针对特殊的接口的单次请求拦截
    this.instance.interceptors.request.use(
      config.interceptors?.requestSuccessFn,
      config.interceptors?.requestFailureFn
    );
    this.instance.interceptors.response.use(
      config.interceptors?.responseSuccessFn,
      config.interceptors?.responseFailureFn
    );
  }

  /*
   * 我们希望对每次请求每个接口 request 和 response 都进行定制化的拦截
   * request({
   *   url:'/xxx',
   *   interceptors:{
   *     requestSuccessFn:(config) => {
   *       console.log("针对 /xxx 请求成功的拦截");
   *       return config;
   *     },
   *   }
   * })
   *
   * 某个接口的请求拦截 -> 全局请求拦截 -> 全局响应拦截 -> 某个接口的响应拦截
   * */

  /**
   * 封装请求方法
   * @param config
   */
  request<T = any>(config: RequestConfig<T>) {
    if (config.interceptors?.requestSuccessFn) {
      // 返回拦截处理后新的 config 
      // 如今新的源码里面需要使用 InternalAxiosRequestConfig 否则会报错
      config = config.interceptors.requestSuccessFn(config as InternalAxiosRequestConfig) as InternalAxiosRequestConfig;
    }
    return new Promise<T>((resolve, reject) => {
      this.instance
        .request<any, T>(config)
        .then((res) => {
          if (config.interceptors?.responseSuccessFn) {
            res = config.interceptors.responseSuccessFn(res);
          }
          resolve(res);
        })
        .catch((err) => reject(err));
    });
  }

  get<T = any>(config: RequestConfig<T>) {
    return this.request({ ...config, method: "GET" });
  }

  post<T = any>(config: RequestConfig<T>) {
    return this.request<T>({ ...config, method: "POST" });
  }

  delete<T = any>(config: RequestConfig<T>) {
    return this.request<T>({ ...config, method: "DELETE" });
  }

  patch<T = any>(config: RequestConfig<T>) {
    return this.request<T>({ ...config, method: "PATCH" });
  }
}

export default MyRequest;

request\type.ts

import {AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig} from "axios";

/**
 * 自定义拦截器类型
 */
export interface Interceptors<T = AxiosResponse> {
  requestSuccessFn?: (config: InternalAxiosRequestConfig) => InternalAxiosRequestConfig | Promise<InternalAxiosRequestConfig>;
  requestFailureFn?: (err: any) => any;
  responseSuccessFn?: (res: T) => T;
  responseFailureFn?: (err: any) => any;
}

/**
 * 针对于原有 axios 的配置进行二次封装(扩展)
 */
export interface RequestConfig<T = AxiosResponse> extends AxiosRequestConfig {
  interceptors?: Interceptors<T>;
}

index

index.ts

import {BASE_URL, TIME_OUT} from "@/service/config";
import MyRequest from "@/service/request";

export const request = new MyRequest({
  baseURL: BASE_URL,
  timeout: TIME_OUT
})

总结

  1. 配置的统一管理 .env 比如 timeout 和 baseUrl
  2. 拦截器二次封装(接口(通过 ts 类型约束和类的继承为每一个 request 方法添加自定义 interceptors 配置,配置上有请求和响应成功和失败的方法)、实例(类构造实例)、全局)
  3. 全局拦截(token 设置、loading 效果、message 弹窗提示)

整体下来最难的地方我感觉是 ts 类型的约束,不看一些源码真的理解不了。

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

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

相关文章

c++:vector模拟实现

一、vector成员变量 库里实现用的就是这三个成员变量&#xff0c;咱们实现跟库里一样&#xff0c; namespace myvector {template<class T>class vector{public://vecttor的迭代器是原生指针typedef T* iterator;typedef const T* const_iterator; private:iterator _sta…

数字后端零基础入门系列 | Innovus零基础LAB学习Day8

###LAB15 Detail Routing for Signal Integrity, Timing, Power and Design for Yield 这个章节虽然标题有点长&#xff0c;但不要被它吓到&#xff0c;其实这个章节就是Innovus工具的绕线Routing。只不过这个阶段做Route不是仅仅是把所有的逻辑连接&#xff0c;用实际的金属层…

发现研究的组织是自己所在组织,有点慌

donnyhuang 2019-5-29 23:34 我们做业务建模研究的组织可以是自己所在的组织吗&#xff1f;例如&#xff0c;如果我想做一个组件来来提高研发效能&#xff0c;那我研究的组织是我们部门的研发线可以吗&#xff1f; 因为最近做一个设备管理的建模&#xff0c;发现研究的组织是自…

将数学学生搞糊涂的糊涂话:面积(路程)是一种对应规则(关系)

黄小宁 将一种关系与构成此关系的成员、要素混为一谈是非常低级的常识性错误。问题是学生们做梦都不敢怀疑课本会有这样的错误。有战士与班长之间构成一种上下级关系&#xff0c;战士必须服从上级的指挥。将构成此关系中的班长说成是关系本身显然是概念性错误。同样&#xff0c…

(九)JavaWeb后端开发3——Servlet

目录 1.Servlet由来 2.Servlet快速入门 3.Servlet执行原理 4.Servlet生命周期 1.Servlet由来 在JaveEE API文档中对Servlet的描述是&#xff1a;可以运行在服务器端的微小程序&#xff0c;但是实际上&#xff0c;Servlet就是一个接口&#xff0c;定义了Java类被浏览器访问…

【51单片机】矩阵键盘

学习使用的开发板&#xff1a;STC89C52RC/LE52RC 编程软件&#xff1a;Keil5 烧录软件&#xff1a;stc-isp 开发板实图&#xff1a; 文章目录 矩阵键盘 矩阵键盘 矩阵键盘位于开发板的右下角 在键盘中按键数量较多时&#xff0c;为了减少I/O口的占用&#xff0c;通常将按键…

特朗普概念股分析:DJT和Phunware股价大涨:买还是卖?

猛兽财经核心观点&#xff1a; &#xff08;1&#xff09;特朗普媒体科技集团的股价已经从9月份的低点上涨了280%。 &#xff08;2&#xff09;随着特朗普赢得大选的概率上升&#xff0c;Phunware的股价也在大幅上涨 &#xff08;3&#xff09;这些股票在大选后逆转的可能性越来…

Python | Leetcode Python题解之第522题最长特殊序列II

题目&#xff1a; 题解&#xff1a; class Solution:def findLUSlength(self, strs: List[str]) -> int:def is_subseq(s: str, t: str) -> bool:pt_s pt_t 0while pt_s < len(s) and pt_t < len(t):if s[pt_s] t[pt_t]:pt_s 1pt_t 1return pt_s len(s)ans …

FlinkCDC-MYSQL批量写入

一、运行环境 &#xff08;1&#xff09;Flink&#xff1a;1.17.2 &#xff08;2&#xff09;Scala&#xff1a;2.12.20 &#xff08;3&#xff09;Mysql&#xff1a;5.7.43 ##开启binlog 二、代码示例 思路&#xff1a;通过滚动窗口收集一批数据推给sink消费。binlog日志对…

群控系统服务端开发模式-应用开发-上传配置功能开发

下面直接进入上传配置功能开发&#xff0c;废话不多说。 一、创建表 1、语句 CREATE TABLE cluster_control.nc_param_upload (id int(11) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 编号,upload_type tinyint(1) UNSIGNED NOT NULL COMMENT 上传类型 1&#xff1a;本站 2&a…

【大语言模型】ACL2024论文-03 MAGE: 现实环境下机器生成文本检测

【大语言模型】ACL2024论文-03 MAGE: 现实环境下机器生成文本检测 目录 文章目录 【大语言模型】ACL2024论文-03 MAGE: 现实环境下机器生成文本检测目录摘要研究背景问题与挑战如何解决核心创新点算法模型实验效果&#xff08;包含重要数据与结论&#xff09;主要参考工作后续优…

C++设计模式结构型模式———组合模式

文章目录 一、引言二、组合模式三、总结 一、引言 组合模式是一种结构型设计模式&#xff0c; 可以使用它将对象组合成树状结构&#xff0c; 并且能像使用独立对象一样使用它们。代码实现中涉及了递归调用。组合模式与传统上的“类与类之间的组合关系”没有关联&#xff0c;不…

【C/C++】qsort函数的学习与使用

零.导言 在之前的文章中&#xff0c;我介绍了冒泡排序&#xff0c;即按ASCII码值把元素从小到大排序&#xff08;文章链接我放在了第五部分&#xff0c;有兴趣的小伙伴可以求看看&#xff09;。而今天我将继续介绍qsort函数&#xff0c;这个函数可以起到和冒泡排序一样的作用&a…

前段(vue)

目录 跨域是什么&#xff1f; SprinBoot跨域的三种解决方法 JavaScript 有 8 种数据类型&#xff0c; 金额的用什么类型。 前段 区别 JQuery使用$.ajax()实现异步请求 Vue 父子组件间的三种通信方式 Vue2 和 Vue3 存在多方面的区别。 跨域是什么&#xff1f; 跨域是指…

【elkb】索引生命周期管理

索引生命周期管理 Index lifecycle management(索引生命周期管理)是elasticsearch提供的一种用于自动管理索引的生命周期的功能。允许使用者定义索引的各个阶段&#xff0c;从创建至删除。并允许使用者在每个阶段定义索引需要执行的特定动作。这些动作包含索引创建&#xff0c…

基于SSM志愿者招募系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;志愿组织管理&#xff0c;组织信息管理&#xff0c;组织申请管理&#xff0c;志愿活动管理活动报名管理 用户账号功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;…

msys2更换国内源(多个文件(不是3个文件的版本!))

msys2更换国内源 起因排查答案如下mirrorlist.mingw64mirrorlist.ucrt64mirrorlist.mingw32mirrorlist.mingwmirrorlist.clang64mirrorlist.clang32mirrorlist.msys 不想看经过的直接跳到答案 起因 查了很多个教程大部分都是【打开MSYS2软件内的\etc\pacman.d\ 中3个文件&…

Spring Boot框架下的信息学科平台系统架构设计

3系统分析 3.1可行性分析 通过对本基于保密信息学科平台系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本基于保密信息学科平台系统采用Spring Boot框架&a…

基于Python可视化的热门微博数据分析系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于pythondjangovueMySQL的热…

ffplay 实现视频流中音频的延迟

ffplay -rtsp_transport tcp -i rtsp://admin:1234qwer192.168.1.64:554/Streaming/Channels/101 -vn -af "adelay5000|5000"在这个命令中&#xff1a; -vn 参数表示只播放音频。 -af "adelay5000|5000" 参数表示将音频延迟5000毫秒&#xff08;即5秒&…