Vue3 + TS + axios 快速二次封装axios ，搭建适用于自己的请求工具类，小白推荐

Vue3 + TS + axios 快速二次封装axios

• 这里博主只是教会快速二次封装axios，前提是需要掌握TS

配置请求工具

• 第一种方法就是根据openAI自动生成请求，手动添加请求头中的token即可。不好用，在此忽略

• 第二种就是自己封装一个axios请求，当然更推荐自己封装的，好用。

• 个人搭配的axios发送请求封装类，为了方便展示效果，博主在此添加了Elementplus的消息框，方便接收成功和失败的提示。如果想要直接使用，没有导入ElementPlus的情况下，记得删除掉。为了方便测试请求接收到的内容，还写了一堆控制台打印，记得也删除掉。

提前创建好两个ts文件注意看好，一个是ts一个是.d.ts

1. 手动创建一个ts文件，导入下面内容到request中即可

import axios, { type AxiosRequestConfig, type AxiosResponse } from 'axios'
// import { ElMessage } from 'element-plus'
import { adminStore } from '@/stores/admin'
//请求路径
const baseURL = 'http://localhost:8080/api'


//创建axios实例
const service = axios.create({
  // 设置基础地址和超时时间
  baseURL,
  //十秒
  timeout: 10000
})

//请求拦截器 添加请求头
service.interceptors.request.use((config) => {
  config.headers = config.headers || {}
  const adminMessage = adminStore()
  if (adminMessage.admin) {
    //添加token
    config.headers.kubernetes = adminMessage.admin.token
  }
  return config
})

//响应拦截
service.interceptors.response.use((res) => {
  //处理通用响应结构，返回 data 部分
  // const apiResponse: ApiResponse<any> = res.data
  const code: number = res.data.code
  //响应码为失败
  if (code != 0) {
    // ElMessage.error(res.data.message)
    console.log(res)
    return Promise.reject(res.data)
  }
  // ElMessage({ message: res.data.message, type: 'success' })
  console.log('res内容')
  console.log(res)
  return res.data
}, (err) => {
  // //特殊错误情况
  // if (err.response?.status === 401) {
  //     router.push('/login')
  // }

  //错误信息处理 提示信息错误
  // ElMessage.error(err.message)
  console.log('错误提示' + err)
  return Promise.reject(err)
})

// 返回实例
export default service

2. 发送请求时，做了一个设置泛型，方便和后端配合接收数据,创建一个ApiResponse.d.ts文件导入下面内容。

// 定义通用响应结构
export type ApiResponse<T> = {
  code: number;
  data: T;
  message: string;
}

3. 创建service.ts文件，写好发送请求的方法。
   ApiResponse中的any就是你要设置的后端发送过来的数据的泛型。例如我要获取全部文章的数量，那么就设置一个number的泛型
   如果要给后端发送数据，就是定义好date，设置好date的泛型，将date直接放入到路径的后方即可，可以看第二个方法

• 这是写请求的模板 再写新的请求的时候就按照上面的模板写就可以了。四个xxx，就是需要改动的地方，方法名，接收参数的泛型，post或者get请求，请求路径

export const xxx = (): Promise<ApiResponse<xxx>> => {
  return service.xxx('/xxx') 
}

• 实战

import service from '@/request/request'
import type { ApiResponse } from '@/request/ApiResponse'

//查询全部文章数量
export const selectPostCountAPI = (): Promise<ApiResponse<number>> => {
  return service.get('/admin/selectPostCount')
}

// 给后端发送数据
// 提交文章
export const submitPostAPI = (data: submitPost): Promise<ApiResponse<number>> => {
  return service.post('/admin/submitPost', data)
}

4. 在一个页面中调用上面导出的方法，就可以发送请求了

// 提交文章
const submitPost = async () => {

  const res = await submitPostAPI({  //submitPostAPI就是我们上面写的提交文章接口
    title: context.value.title,
    content: context.value.content,
    postAvatar: ''
  })
  
  if (res.code == 0) {
    ElMessage.success('上传成功!')
    router.push({
      path: '/index/adminPostList'
    })
  }
}