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

封装思想

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

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

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

实现一个HttpRequest的类

在utils创建utils/request.ts文件

import axios, { AxiosInstance, AxiosRequestConfig, InternalAxiosRequestConfig, AxiosResponse } from "axios"
import { ElLoading } from 'element-plus'

interface Result<T = any> {
  code: number | string;
  msg: string;
  data: T;
  total: number;
};


// 导出Request类，可以用来自定义传递配置来创建实例
class HttpRequest {
  baseURL: string;
  timeout: number;

  constructor() {
    this.baseURL = import.meta.env.VITE_APP_BASE_API;
    this.timeout = 60000
  }

  request<T = any>(options: AxiosRequestConfig): Promise<Result<T>> {
    // axios 实例
    const instance: AxiosInstance = axios.create()
    this.setInterceptors(instance)
    const opts = this.mergeOptions(options)
    return instance(opts)
  }

  get<T = any>(url: string, data?: any, outHeaders = {}): Promise<Result<T>> {
    return this.request<T>({
      method: 'get',
      url,
      params: { ...data }, // get参数可以直接展开
      headers: {}
    })
  }

  post<T = any>(url: string, body = {}, outHeaders = {}): Promise<Result<T>> {
    let data = {
      body,
      header: {}
    }
    return this.request<T>({
      method: 'post',
      url,
      data, // post要求必须传入data属性
    })
  }
  mergeOptions(options: AxiosRequestConfig) {
    //console.log('合并参数', options)
    return {
      baseURL: this.baseURL,
      timeout: this.timeout,
      ...options
    }
  }
  // 设置拦截器
  setInterceptors(instance: AxiosInstance) {
    let loading: any
    // 请求拦截器
    instance.interceptors.request.use((config) => {
      loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      // 一般会请求拦截里面加token，用于后端的验证
/*       const token = localStorage.getItem("token")
      config!.headers!.Authorization = token
      config.headers = Object.assign(config.headers, { ...config.headers, token }); */

      return config
    },
      (err: any) => {
        console.log(err);
        return Promise.reject(err);
      })

    // 响应拦截器
    instance.interceptors.response.use(
      (res) => {
        console.log("🚀 ~ file: axios.ts:89 ~ HttpRequest ~ setInterceptors ~ res:", res)
        //res为AxiosResponse类型，含有config\data\headers\request\status\statusText属性
        loading.close()
        let { status, data } = res
        if (status === 200) {
          // return Promise.resolve(res.data)
          return data
        } else {

        }
      },
      err => {
        console.log('axios报错', err)
        loading.close() // 立即关闭加载框
        return Promise.reject(err)
      }
    )
  }
}
// 默认导出Request实例
export default new HttpRequest()

在src目录下创建src/api/config文件夹

config文件夹中创建home.ts文件，首页的接口都放在里面统一管理

export default {
  getHomeData: "/frontpage",
}

 在src目录下创建src/api文件夹下创建home.ts文件，统一管理请求接口的方法

import axios from '@/utils/request'
import home from './config/home'
 
export const getHomeData = () => axios.get(home.getHomeData) //无参使用方式
export const getHomeData = options:any => axios.get(home.getHomeData, options) //有参使用方式 options参数可以自行统一定义类型

在页面中使用，home.vue文件

<template>
  <div class="p-2">
  </div>
</template>

<script setup name="Home" lang="ts">
import { getHomeData } from '@/api/home';

import { ComponentInternalInstance, computed, getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs } from 'vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const data = reactive<any>({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
});

const { queryParams} = toRefs(data);

const getList = async () => {
  const res = await getHomeData (queryParams.value);
  console.log("🚀 ~ file: index.vue:158 ~ getList2 ~ res:", res)
}


onMounted(() => {
  getList();
});
</script>