devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue3+TS封装axios

作者：小小林熬夜学编程 | 2024-03-22 05:45:22

赞

踩

vue3+ts封装axios

1.实现最基础的封装

将其封装为一个类，而不是一个函数的原因是因为类可以创建多个实例，适用范围更广，封装性更强一些。

index.ts 

  1. // index.ts
  2. import axios from 'axios'
  3. import type { AxiosInstance, AxiosRequestConfig } from 'axios'
  4.  
  5. class ZJRequest {
  6.   // axios 实例
  7.  // 定义一个axion实例属性
  8.   instance: AxiosInstance
  9. // 利用构造函数要求传入使用 ZJRequest类时传入参数
  10.   constructor(config: AxiosRequestConfig) {
  11.  // 把axios实例赋给instance
  12.     this.instance = axios.create(config)
  13.   }
  14.   request(config: AxiosRequestConfig) {
  15.     return this.instance.request(config)
  16.   }
  17. }
  18.  
  19. export default ZJRequest

2.拦截器封装

首先我们封装一下拦截器，这个拦截器分为三种：

  • 类拦截器
  • 实例拦截器
  • 接口拦截器

接下来我们就分别实现这三个拦截器。

类拦截器

类拦截器比较容易实现，只需要在类中对axios.create()创建的实例调用interceptors下的两个拦截器即可，实例代码如下：

  1.  // index.ts
  2. constructor(config: AxiosRequestConfig) {
  3.   this.instance = axios.create(config)
  4.   
  5.  // 添加所有的实例都有的拦截器
  6.     this.instance.interceptors.request.use(
  7.       (config) => {
  8.         // console.log('所有的实例都有的拦截器：请求拦截成功')
  9.         if (this.showLoading) {
  10.           this.loading = ElLoading.service({
  11.             lock: true,
  12.             text: '正在请求数据....',
  13.             background: 'rgba(0,0,0,0.5)'
  14.           })
  15.         }
  16.  
  17.         return config
  18.       },
  19.       (err) => {
  20.         // console.log('所有的实例都有的拦截器：请求拦截失败')
  21.         return err
  22.       }
  23.     )
  24.     this.instance.interceptors.response.use(
  25.       (res) => {
  26.         // console.log('所有的实例都有的拦截器：响应拦截成功')
  27.         // 将loading移除
  28.         this.loading?.close()
  29.         // 将loading移除
  30.         // this.loading?.close()
  31.         const data = res.data
  32.         if (data.returnCode === '-1001') {
  33.           console.log('请求失败，错误信息')
  34.         } else {
  35.           return data
  36.         }
  37.       },
  38.       (err) => {
  39.         console.log('所有的实例都有的拦截器：响应拦截失败')
  40.  
  41.         // 将loading移除
  42.         this.loading?.close()
  43.  
  44.         if (err.response.status === 404) {
  45.           console.log('404的错误')
  46.         }
  47.         return err
  48.       }
  49.     )
  50. }

实例拦截器

实例拦截器是为了保证封装的灵活性，因为每一个实例中的拦截后处理的操作可能是不一样的，所以在定义实例时，允许我们传入拦截器。

首先我们定义一下interface，方便类型提示，代码如下：

  1.  constructor(config: HYRequestConfig) {
  2.     this.instance = axios.create(config)
  3.     this.showLoading = config.showLoading ?? true
  4.  // 实例拦截器
  5.     this.interceptors = config.interceptors
  6.     this.instance.interceptors.request.use(
  7.       this.interceptors?.requestInterceptor,
  8.       this.interceptors?.requestInterceptorCatch
  9.     )
  10.     this.instance.interceptors.response.use(
  11.       this.interceptors?.responseInterceptor,
  12.       this.interceptors?.responseInterceptorCatch
  13.     )
  14. }

接口拦截

  1.  request<T>(config: HYRequestConfig<T>): Promise<T> {
  2.     return new Promise((resolve, reject) => {
  3.       // 1.单个请求对请求config的处理
  4.       if (config.interceptors?.requestInterceptor) {
  5.         config = config.interceptors.requestInterceptor(config)
  6.       }
  7.  
  8.       // 2.判断是否需要显示loading
  9.       if (config.showLoading === false) {
  10.         this.showLoading = config.showLoading
  11.       }
  12.  
  13.       this.instance
  14.         .request<any, T>(config)
  15.         .then((res) => {
  16.           // 1.单个请求对数据的处理
  17.           if (config.interceptors?.responseInterceptor) {
  18.             res = config.interceptors.responseInterceptor(res)
  19.           }
  20.           // 2.将showLoading设置true, 这样不会影响下一个请求
  21.           this.showLoading = DEAFULT_LOADING
  22.  
  23.           // 3.将结果resolve返回出去
  24.           resolve(res)
  25.         })
  26.         .catch((err) => {
  27.           // 将showLoading设置true, 这样不会影响下一个请求
  28.           this.showLoading = DEAFULT_LOADING
  29.           reject(err)
  30.           return err
  31.         })
  32.     })
  33.   }
  34.  
  35.   get<T>(config: HYRequestConfig<T>): Promise<T> {
  36.     return this.request<T>({ ...config, method: 'GET' })
  37.   }
  38.  
  39.   post<T>(config: HYRequestConfig<T>): Promise<T> {
  40.     return this.request<T>({ ...config, method: 'POST' })
  41.   }
  42.  
  43.   delete<T>(config: HYRequestConfig<T>): Promise<T> {
  44.     return this.request<T>({ ...config, method: 'DELETE' })
  45.   }
  46.  
  47.   patch<T>(config: HYRequestConfig<T>): Promise<T> {
  48.     return this.request<T>({ ...config, method: 'PATCH' })
  49.   }

3.完整的index.ts文件和type.ts

  1. import axios from 'axios'
  2. import type { AxiosInstance } from 'axios'
  3. //导入自己定义的两个类型
  4. import type { HYRequestInterceptors, HYRequestConfig } from './type'
  5. import { ElLoading } from 'element-plus/lib/components/loading/index'
  6. import { LoadingInstance } from 'element-plus/lib/components/loading/src/loading'
  7.  
  8. const DEAFULT_LOADING = true
  9. class ZJRequest {
  10.   instance: AxiosInstance
  11.   interceptors?: HYRequestInterceptors
  12.   showLoading: boolean
  13.   loading?: LoadingInstance
  14.   constructor(config: HYRequestConfig) {
  15.     this.instance = axios.create(config)
  16.     this.showLoading = config.showLoading ?? true
  17.     this.interceptors = config.interceptors
  18.     this.instance.interceptors.request.use(
  19.       this.interceptors?.requestInterceptor,
  20.       this.interceptors?.requestInterceptorCatch
  21.     )
  22.     this.instance.interceptors.response.use(
  23.       this.interceptors?.responseInterceptor,
  24.       this.interceptors?.responseInterceptorCatch
  25.     )
  26.  
  27.     // 添加所有的实例都有的拦截器
  28.     this.instance.interceptors.request.use(
  29.       (config) => {
  30.         // console.log('所有的实例都有的拦截器：请求拦截成功')
  31.         if (this.showLoading) {
  32.           this.loading = ElLoading.service({
  33.             lock: true,
  34.             text: '正在请求数据....',
  35.             background: 'rgba(0,0,0,0.5)'
  36.           })
  37.         }
  38.  
  39.         return config
  40.       },
  41.       (err) => {
  42.         // console.log('所有的实例都有的拦截器：请求拦截失败')
  43.         return err
  44.       }
  45.     )
  46.     this.instance.interceptors.response.use(
  47.       (res) => {
  48.         // console.log('所有的实例都有的拦截器：响应拦截成功')
  49.         // 将loading移除
  50.         this.loading?.close()
  51.         // 将loading移除
  52.         // this.loading?.close()
  53.         const data = res.data
  54.         if (data.returnCode === '-1001') {
  55.           console.log('请求失败，错误信息')
  56.         } else {
  57.           return data
  58.         }
  59.       },
  60.       (err) => {
  61.         console.log('所有的实例都有的拦截器：响应拦截失败')
  62.  
  63.         // 将loading移除
  64.         this.loading?.close()
  65.  
  66.         if (err.response.status === 404) {
  67.           console.log('404的错误')
  68.         }
  69.         return err
  70.       }
  71.     )
  72.   }
  73.   request<T>(config: HYRequestConfig<T>): Promise<T> {
  74.     return new Promise((resolve, reject) => {
  75.       // 1.单个请求对请求config的处理
  76.       if (config.interceptors?.requestInterceptor) {
  77.         config = config.interceptors.requestInterceptor(config)
  78.       }
  79.  
  80.       // 2.判断是否需要显示loading
  81.       if (config.showLoading === false) {
  82.         this.showLoading = config.showLoading
  83.       }
  84.  
  85.       this.instance
  86.         .request<any, T>(config)
  87.         .then((res) => {
  88.           // 1.单个请求对数据的处理
  89.           if (config.interceptors?.responseInterceptor) {
  90.             res = config.interceptors.responseInterceptor(res)
  91.           }
  92.           // 2.将showLoading设置true, 这样不会影响下一个请求
  93.           this.showLoading = DEAFULT_LOADING
  94.  
  95.           // 3.将结果resolve返回出去
  96.           resolve(res)
  97.         })
  98.         .catch((err) => {
  99.           // 将showLoading设置true, 这样不会影响下一个请求
  100.           this.showLoading = DEAFULT_LOADING
  101.           reject(err)
  102.           return err
  103.         })
  104.     })
  105.   }
  106.  
  107.   get<T>(config: HYRequestConfig<T>): Promise<T> {
  108.     return this.request<T>({ ...config, method: 'GET' })
  109.   }
  110.  
  111.   post<T>(config: HYRequestConfig<T>): Promise<T> {
  112.     return this.request<T>({ ...config, method: 'POST' })
  113.   }
  114.  
  115.   delete<T>(config: HYRequestConfig<T>): Promise<T> {
  116.     return this.request<T>({ ...config, method: 'DELETE' })
  117.   }
  118.  
  119.   patch<T>(config: HYRequestConfig<T>): Promise<T> {
  120.     return this.request<T>({ ...config, method: 'PATCH' })
  121.   }
  122. }
  123.  
  124. export default ZJRequest
  1. import type { AxiosRequestConfig, AxiosResponse } from 'axios'
  2.  
  3. export interface HYRequestInterceptors<T = AxiosResponse> {
  4.   requestInterceptor?: (config: AxiosRequestConfig) => AxiosRequestConfig
  5.   requestInterceptorCatch?: (error: any) => any
  6.   responseInterceptor?: (res: T) => T
  7.   responseInterceptorCatch?: (error: any) => any
  8. }
  9.  
  10. export interface HYRequestConfig<T = AxiosResponse> extends AxiosRequestConfig {
  11.   interceptors?: HYRequestInterceptors<T>
  12.   showLoading?: boolean
  13. }

4.在index.js先导入ZJRequest

从config中导入相关的配置

new一个实例

  1. //service统一的出口
  2.  
  3. import ZJRequest from './request'
  4. import { BASE_URL, TIME_OUT } from './request/config'
  5. import localCache from '@/utils/cache'
  6. // export default hyRequest =new HYRequest (){
  7. // }
  8. const zjRequest = new ZJRequest({
  9.   baseURL: BASE_URL,
  10.   timeout: TIME_OUT,
  11.   // 这是拦截器
  12.   interceptors: {
  13.     requestInterceptor: (config) => {
  14.       // 携带token的拦截
  15.       const token = localCache.getCache('token')
  16.       if (token) {
  17.         // 注意要加这个感叹号，不然会报错
  18.         config.headers!.Authorization = `Bearer ${token}`
  19.       }
  20.       console.log(config)
  21.       // console.log('请求成功的拦截')
  22.       return config
  23.     },
  24.     requestInterceptorCatch: (err) => {
  25.       // console.log('请求失败的拦截')
  26.       return err
  27.     },
  28.     responseInterceptor: (res) => {
  29.       // console.log('响应成功的拦截')
  30.       return res
  31.     },
  32.     responseInterceptorCatch: (err) => {
  33.       // console.log('响应失败的拦截')
  34.       return err
  35.     }
  36.   }
  37. })
  38. export default zjRequest

5.测试是否发送请求成功

先定义返回的数据类型文件type.ts

  1. export interface IDataType<T = any> {
  2.   code: number
  3.   data: T
  4. }

 之后对应的请求代码中，可以加入IDataType规范返回的数据类型

  1. export function requestUserInfoById(id: number) {
  2.   return hyRequest.get<IDataType>({
  3.     url: LoginAPI.LoginUserInfo + id,
  4.     showLoading: false
  5.   })
  6. }

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号