vue3 axios封装(ts+Element Plus版)

vue3 axios封装(ts+Element Plus版)

参考链接: https://blog.csdn.net/weixin_43743175/article/details/131731133

• request.ts

import axios, { AxiosInstance, AxiosRequestConfig, InternalAxiosRequestConfig, AxiosResponse } from "axios"
import { ElLoading, ElMessage, ElMessageBox } 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("🚀 res:", res)
        //res为AxiosResponse类型，含有config\data\headers\request\status\statusText属性
        loading.close()
        let { status, data } = res
        if (res.data.code != 200) {
            if (res.headers['content-type'] == 'application/octet-stream') return res;
          // return Promise.resolve(res.data)
            
            ElMessage.error(res.data.msg); // 显示错误消息
       
        } else {
            // 成功
  		   return data
        }
      },
      err => {
        console.log('axios报错', err)
        loading.close() // 立即关闭加载框
        ElMessage.error(err); // 显示错误消息
        return Promise.reject(err)
      }
    )
  }
}
// 默认导出Request实例
export default new HttpRequest()

• api.ts

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

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

<script setup name="Home" lang="ts">
import { getHomeData } from '@/api.ts';
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(" res:", res)
}
 
onMounted(() => {
  getList();
});
</script>