• 在项目中使用TS封装 axios，一次封装永久使用

    多一些不为什么的坚持🤳

    这里是 大眼(◉ɷ◉ )萌 – 贤蛋 🥚，一名很普通但不想普通的程序媛🙊

    📝本文章收录于专栏：Vue3+Ts 管理系统

    TS封装axios

    💡 安装axios

    yarn add axios

    • 1

    🔍 区分开发环境

    • 方式一：可以自己手动修改，但是不推荐
    • 方式二：根据 process.env.NODE_ENV 区分（推荐）
    • 方式三：根据 vue-cli 脚手架的 env配置不同开发环境，详情可以看vue-cli官方文档介绍
    // src/service/request/config.ts

// 根据process.env.NODE_ENV 区分
// 开发环境: development
// 生成环境：production
// 测试环境: test

let BASE_URL = ''

const TIME_OUT = 10000

if (process.env.NODE_ENV === 'development') {
  // 这里BASE_URL 后地址根据实际项目服务器地址填写，这里是示例
  BASE_URL = 'http://123.207.32.32:8000'
} else if (process.env.NODE_ENV === 'production') {
  BASE_URL = 'http://elva.org/prod'
} else {
  BASE_URL = 'http://elva.org/test'
}

export { BASE_URL, TIME_OUT }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    ⚙️ 实现最基础的封装

    //  src/service/request/index.ts
import axios from 'axios'
import type { AxiosInstance, AxiosResponse，AxiosRequestConfig } from 'axios'

class XDRequest {
  // axios 实例
  instance: AxiosInstance
    
   constructor(config: AxiosRequestConfig) {
    this.instance = axios.create(config)
  }
  request(config: AxiosRequestConfig): void {
   return this.instance.request(config)
      }
}

export default XDRequest


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    注意：这里封装一个类，是因为类可以new出多个实例

    🔧 封装拦截器

    ==注意：==这里的封装思路是：

    image-20220723170711689

    ​ axios 提供的AxiosRequestConfig 类型是不允许我们传入拦截器的，这个时候需要我们自己定义一个接口，使改造后的接口继承AxiosRequestConfig

    // src/service/request/type.ts

import type { AxiosRequestConfig, AxiosResponse } from 'axios'

export interface XDRequestInterceptors {
  requestIntercetor?: (config: AxiosRequestConfig) => AxiosRequestConfig
  requestIntercetorCatch?: (error: any) => any
  responseInterceptor?: (res: AxiosResponse) => AxiosResponse
  responseInterceptorCatch?: (error: any) => any
}

export interface XDRequestConfig extends AxiosRequestConfig {
  interceptors?: XDRequestInterceptors
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    ☝🏻 1. 类拦截器

    ​ 只需要在类中在axios.create()创建的实例中调用 interceptors中两个拦截器

    image-20220723172447949

    完整代码：

    //  src/service/request/index.ts
import axios from 'axios'
import type { AxiosInstance, AxiosResponse } from 'axios'
import type { XDRequestInterceptors, XDRequestConfig } from './type'

class XDRequest {
  // axios 实例
  instance: AxiosInstance
    
   constructor(config: AxiosRequestConfig) {
    this.instance = axios.create(config)
     // 全局拦截器
    this.instance.interceptors.request.use(
      (config: XDRequestConfig) => {
        console.log('所有的实例都有的拦截器: 请求成功拦截')
        return config
      },
      //  请求失败拦截
      (err: any) => err
    )
    this.instance.interceptors.response.use(
      (res: AxiosResponse) => {
        console.log('所有实例都有的拦截器：响应成功拦截')
        return res
      },
      // 响应失败拦截
      (err: any) => err
    )
  }
  request(config: AxiosRequestConfig): void {
   return this.instance.request(config)
      }
}

export default XDRequest

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    ✌🏻 2. 实例拦截器

    image-20220723172348130

    完整代码：

    //  src/service/request/index.ts
import axios from 'axios'
import type { AxiosInstance, AxiosResponse } from 'axios'
import type { XDRequestInterceptors, XDRequestConfig } from './type'

class XDRequest {
  // axios 实例
  instance: AxiosInstance
   // 拦截器对象
  interceptorsObj?: XDRequestInterceptors
    
  constructor(config: AxiosRequestConfig) {
    this.instance = axios.create(config)
      
    // 实例拦截器
    this.interceptorsObj = config.interceptors

    this.instance.interceptors.request.use(
      this.interceptorsObj?.requestIntercetor,
      this.interceptorsObj?.requestIntercetorCatch
    )
    this.instance.interceptors.response.use(
      this.interceptorsObj?.responseInterceptor,
      this.interceptorsObj?.responseInterceptorCatch
    )
      
   // 全局拦截器(所有实例都有的拦截器)  
    this.instance.interceptors.request.use(
      (config: XDRequestConfig) => {
        console.log('所有的实例都有的拦截器: 请求成功拦截')
        return config
      },
      //  请求失败拦截
      (err: any) => err
    )
    this.instance.interceptors.response.use(
      (res: AxiosResponse) => {
        console.log('所有实例都有的拦截器：响应成功拦截')
        return res
      },
      // 响应失败拦截
      (err: any) => err
    )
  }
  request(config: AxiosRequestConfig): void {
   return this.instance.request(config)
      }
}

export default XDRequest

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50

    🤟🏻 3. 接口（单一方法）拦截器

    image-20220723172629476

    完整代码：

    import axios from 'axios'
import type { AxiosInstance, AxiosResponse } from 'axios'
import type { XDRequestInterceptors, XDRequestConfig } from './type'

class XDRequest {
  // axios 实例
  instance: AxiosInstance
  // 拦截器对象
  interceptorsObj?: XDRequestInterceptors
  // 使用拦截器
  constructor(config: XDRequestConfig) {
    this.instance = axios.create(config)

    // 1. 使用实例拦截器
    this.interceptorsObj = config.interceptors

    this.instance.interceptors.request.use(
      this.interceptorsObj?.requestIntercetor,
      this.interceptorsObj?.requestIntercetorCatch
    )
    this.instance.interceptors.response.use(
      this.interceptorsObj?.responseInterceptor,
      this.interceptorsObj?.responseInterceptorCatch
    )

    // 2. 全局拦截器(所有实例都有的拦截器)
    this.instance.interceptors.request.use(
      (config: XDRequestConfig) => {
        console.log('所有的实例都有的拦截器: 请求成功拦截')
        return config
      },
      //  请求失败拦截
      (err: any) => err
    )
    this.instance.interceptors.response.use(
      (res: AxiosResponse) => {
        console.log('所有实例都有的拦截器：响应成功拦截')
        return res
      },
      // 响应失败拦截
      (err: any) => err
    )
  }
  // 3. 为单个请求添加拦截器
  request(config: XDRequestConfig): void {
    // 如果我们为单个请求添加拦截器，这里使用单个请求的拦截
    if (config.interceptors?.requestIntercetor) {
      config = config.interceptors.requestIntercetor(config)
    }
    this.instance.request(config).then((res) => {
      // 如果我们为单个响应添加拦截器，这里使用单个响应的拦截
      if (config.interceptors?.responseInterceptor) {
        res = config.interceptors.responseInterceptor(res)
      }
      console.log(res)
    })
  }
}

export default XDRequest


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61

    🐾 测试：

    // src/service/index.ts

// 测试实例拦截器
import XDRequest from './request'

import { BASE_URL, TIME_OUT } from './request/config'

const xdRequest = new XDRequest({
  baseURL: BASE_URL,
  timeout: TIME_OUT,
  interceptors: {
    requestIntercetor: (config) => {
      console.log('请求成功拦截')
      return config
    },
    requestIntercetorCatch: (err) => {
      console.log('请求拦截失败')
      return err
    },
    responseInterceptor: (res) => {
      console.log('响应成功拦截')
      return res
    },
    responseInterceptorCatch: (err) => {
      console.log('响应失败的拦截')
      return err
    }
  }
})

export default xdRequest

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    // 在整个mian.ts添加代码测试全局拦截器

import xdRequest from './service'
xdRequest.request({
  url: '/home/multidata',
  method: 'GET',
  interceptors: {
    requestIntercetor: (config) => {
      console.log('单独请求的config')
      return config
    }
  }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    结果：

    image-20220723173253116

    √ 完成

    喜欢就一键三连吧！

  • 相关阅读:
    力扣每日一题2022-09-22简单题：能否连接形成数组
    一个.Net Core开发的开源动态壁纸软件
    Django之视图层
    作业 练习题
    堆排序 ← 改编自《啊哈！算法》
    UE4 Niagara Module Script 初次使用笔记
    python将xml格式文件转成png或者pdf格式
    iptables使用详解(centos7)
    聚合大模型场景助力产业升级，WAIC 2024 容联云论坛即将开幕
    C++语言程序设计(第5版 郑莉、董渊)学习笔记（自用~）
  • 原文地址：https://blog.csdn.net/weixin_47980825/article/details/125956587