在vue項目中一般是通過axios進行接口請求，axios已經(jīng)幫我們做了很多事，但是在實際項目中還需要進行二次封裝才能更好的運用在我們的項目中 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) => {
  // 這里可以對響應進行統(tǒng)一處理
  return response
}, error => {
  // 可以對錯誤進行統(tǒng)一處理,彈窗提示
  return Promise.reject(error)
})

/**
 * 封裝post請求,在api模塊直接調(diào)用
 *  -url 請求地址
 *  -params 參數(shù)
 *  -isQs 是否將參數(shù)序列化
 */

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

/**
 * 封裝get請求,在api模塊直接調(diào)用
 *  -url 請求地址
 *  -query 參數(shù)
 */

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

封裝好axios后我們在src目錄下創(chuàng)建api模塊管理所有的api接口

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

// 賬號密碼登錄
export const loginByUsername = (params: any) => postApi('/auth/login', params, true)

登錄時調(diào)用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封裝到這里基本完成了，根據(jù)實際的需要在這個基礎上進行修改即可