vite+vue3+ts+pinia+element-plus搭

在vue项目中一般是通过axios进行接口请求，axios已经帮我们做了很多事，但是在实际项目中还需要进行二次封装才能更好的运用在我们的项目中 axios中文文档

Axios 封装

// utils/request.ts
import Axios, { AxiosRequestConfig, AxiosResponse, AxiosPromise } from 'axios'
import { IApiResponse } from '@/types'
import { stringify } from 'qs'
import config from '@/config'

const server = Axios.create({
  baseURL: config.apiConfig.baseUrl,
  timeout: config.apiConfig.timeout,
  withCredentials: config.apiConfig.withCredentials
})
/**
 * 请求拦截
 */
server.interceptors.request.use((config: AxiosRequestConfig) => {
  // 如果需要添加token可以在这里处理
  return config
}, error => {
  return Promise.reject(error)
})
/**
 * 响应拦截
 */
server.interceptors.response.use((response: AxiosResponse) => {
  // 这里可以对响应进行统一处理
  return response
}, error => {
  // 可以对错误进行统一处理,弹窗提示
  return Promise.reject(error)
})

/**
 * 封装post请求,在api模块直接调用
 *  -url 请求地址
 *  -params 参数
 *  -isQs 是否将参数序列化
 */

export const postApi = (url: string, params?: any, isQs?: boolean): AxiosPromise<IApiResponse> => {
  return server({
    url,
    method: 'post',
    data: isQs ? stringify(params) : params
  })
}

/**
 * 封装get请求,在api模块直接调用
 *  -url 请求地址
 *  -query 参数
 */

export const getApi = (url: string, query: any): AxiosPromise<IApiResponse> => {
  return server({
    url,
    method: 'get',
    params: query
  })
}
// 也可以将put，delete进行封装

封装好axios后我们在src目录下创建api模块管理所有的api接口

// user.ts 
import { postApi } from '@/utils/request'

// 账号密码登录
export const loginByUsername = (params: any) => postApi('/auth/login', params, true)

登录时调用api即可

// login.vue
<script setup lang='ts'>
import { reactive, ref } from 'vue'
import type { IloginForm } from '@/types'
import { loginByUsername } from '@/api/user'
const userInfo = reactive<IloginForm >({
  username:'',
  password:''
})
// 账号密码登录
const loginHandle = async () => {
  const data = await loginByUsername (userInfo)
  // 对登录信息进行本地缓存
}
</script>

axios封装到这里基本完成了，根据实际的需要在这个基础上进行修改即可