1. 安裝：

npm install axios

2. 封裝工具文件（src/utils/http.js）：

import axios from 'axios'

// 創(chuàng)建實例并配置基礎(chǔ)路徑、超時時間
const http = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL, // 從環(huán)境變量讀?。ㄍ扑]）
  timeout: 10000
})

// 請求攔截器：添加 token、設(shè)置 headers 等
http.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) config.headers.Authorization = `Bearer ${token}`
  return config
}, error => Promise.reject(error))

// 響應攔截器：統(tǒng)一處理錯誤、剝離響應數(shù)據(jù)等
http.interceptors.response.use(res => res.data, error => {
  // 統(tǒng)一錯誤提示（可結(jié)合 UI 庫如 Vant 的 Toast）
  console.error('請求失?。?, error.message)
  return Promise.reject(error)
})

export default http

3. 全局注冊（在 main.js 中，替代 Vue 2 的 Vue.prototype）：

import { createApp } from 'vue'
import App from './TestA.vue'
import http from './utils/http' // 導入封裝的 axios 實例

const app = createApp(App)
app.config.globalProperties.$http = http // 注冊為全局屬性
app.mount('#app')

# 4. 組件中使用（<script setup>）：
<script setup>
import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance() // 獲取全局屬性代理

// 發(fā)起請求
const fetchData = async () => {
  try {
    const res = await proxy.$http.get('/api/data')
    console.log('請求結(jié)果：', res)
  } catch (err) {
    console.error('請求失?。?, err)
  }
}
</script>