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

Axios 封装

  1. // utils/request.ts
  2. import Axios, { AxiosRequestConfig, AxiosResponse, AxiosPromise } from 'axios'
  3. import { IApiResponse } from '@/types'
  4. import { stringify } from 'qs'
  5. import config from '@/config'
  7. const server = Axios.create({
  8.   baseURL: config.apiConfig.baseUrl,
  9.   timeout: config.apiConfig.timeout,
  10.   withCredentials: config.apiConfig.withCredentials
  11. })
  12. /**
  13.  * 请求拦截
  14.  */
  15. server.interceptors.request.use((config: AxiosRequestConfig) => {
  16.   // 如果需要添加token可以在这里处理
  17.   return config
  18. }, error => {
  19.   return Promise.reject(error)
  20. })
  21. /**
  22.  * 响应拦截
  23.  */
  24. server.interceptors.response.use((response: AxiosResponse) => {
  25.   // 这里可以对响应进行统一处理
  26.   return response
  27. }, error => {
  28.   // 可以对错误进行统一处理,弹窗提示
  29.   return Promise.reject(error)
  30. })
  32. /**
  33.  * 封装post请求,在api模块直接调用
  34.  *  -url 请求地址
  35.  *  -params 参数
  36.  *  -isQs 是否将参数序列化
  37.  */
  39. export const postApi = (url: string, params?: any, isQs?: boolean): AxiosPromise<IApiResponse> => {
  40.   return server({
  41.     url,
  42.     method: 'post',
  43.     data: isQs ? stringify(params) : params
  44.   })
  45. }
  47. /**
  48.  * 封装get请求,在api模块直接调用
  49.  *  -url 请求地址
  50.  *  -query 参数
  51.  */
  53. export const getApi = (url: string, query: any): AxiosPromise<IApiResponse> => {
  54.   return server({
  55.     url,
  56.     method: 'get',
  57.     params: query
  58.   })
  59. }
  60. // 也可以将put，delete进行封装

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

  1. // user.ts 
  2. import { postApi } from '@/utils/request'
  4. // 账号密码登录
  5. export const loginByUsername = (params: any) => postApi('/auth/login', params, true)

登录时调用api即可

  1. // login.vue
  2. <script setup lang='ts'>
  3. import { reactive, ref } from 'vue'
  4. import type { IloginForm } from '@/types'
  5. import { loginByUsername } from '@/api/user'
  6. const userInfo = reactive<IloginForm >({
  7.   username:'',
  8.   password:''
  9. })
  10. // 账号密码登录
  11. const loginHandle = async () => {
  12.   const data = await loginByUsername (userInfo)
  13.   // 对登录信息进行本地缓存
  14. }
  15. </script>

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