devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

axios二次封装(vue3+axios+ts+Element Plus版)_vue3+axios+element plus+ts二次封装

作者：羊村懒王 | 2024-02-14 22:26:29

赞

踩

vue3+axios+element plus+ts二次封装

封装思想

直接使用axios，依赖性太强，今后如要换网络请求库会很麻烦

一些公共的请求功能，每次请求都需要重写配置

将aixos进行加一层封装，将一些公共的功能封装，如网络请求头添加Authorization（即token），加载loading效果等等，拦截器也可以灵活封装

实现一个HttpRequest的类

在utils创建utils/request.ts文件

  1. import axios, { AxiosInstance, AxiosRequestConfig, InternalAxiosRequestConfig, AxiosResponse } from "axios"
  2. import { ElLoading } from 'element-plus'
  3.  
  4. interface Result<T = any> {
  5.   code: number | string;
  6.   msg: string;
  7.   data: T;
  8.   total: number;
  9. };
  10.  
  11.  
  12. // 导出Request类，可以用来自定义传递配置来创建实例
  13. class HttpRequest {
  14.   baseURL: string;
  15.   timeout: number;
  16.  
  17.   constructor() {
  18.     this.baseURL = import.meta.env.VITE_APP_BASE_API;
  19.     this.timeout = 60000
  20.   }
  21.  
  22.   request<T = any>(options: AxiosRequestConfig): Promise<Result<T>> {
  23.     // axios 实例
  24.     const instance: AxiosInstance = axios.create()
  25.     this.setInterceptors(instance)
  26.     const opts = this.mergeOptions(options)
  27.     return instance(opts)
  28.   }
  29.  
  30.   get<T = any>(url: string, data?: any, outHeaders = {}): Promise<Result<T>> {
  31.     return this.request<T>({
  32.       method: 'get',
  33.       url,
  34.       params: { ...data }, // get参数可以直接展开
  35.       headers: {}
  36.     })
  37.   }
  38.  
  39.   post<T = any>(url: string, body = {}, outHeaders = {}): Promise<Result<T>> {
  40.     let data = {
  41.       body,
  42.       header: {}
  43.     }
  44.     return this.request<T>({
  45.       method: 'post',
  46.       url,
  47.       data, // post要求必须传入data属性
  48.     })
  49.   }
  50.   mergeOptions(options: AxiosRequestConfig) {
  51.     //console.log('合并参数', options)
  52.     return {
  53.       baseURL: this.baseURL,
  54.       timeout: this.timeout,
  55.       ...options
  56.     }
  57.   }
  58.   // 设置拦截器
  59.   setInterceptors(instance: AxiosInstance) {
  60.     let loading: any
  61.     // 请求拦截器
  62.     instance.interceptors.request.use((config) => {
  63.       loading = ElLoading.service({
  64.         lock: true,
  65.         text: 'Loading',
  66.         background: 'rgba(0, 0, 0, 0.7)',
  67.       })
  68.       // 一般会请求拦截里面加token，用于后端的验证
  69. /*       const token = localStorage.getItem("token")
  70.       config!.headers!.Authorization = token
  71.       config.headers = Object.assign(config.headers, { ...config.headers, token }); */
  72.  
  73.       return config
  74.     },
  75.       (err: any) => {
  76.         console.log(err);
  77.         return Promise.reject(err);
  78.       })
  79.  
  80.     // 响应拦截器
  81.     instance.interceptors.response.use(
  82.       (res) => {
  83.         console.log("
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/82171
    推荐阅读
    相关标签

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