安装依赖
在 Vue3 项目中统一处理 HTTP 请求，Axios 是最常用的选择。先在终端运行以下命令引入模块：
npm i axios
安装成功后，项目依赖列表里就会多出 axios 相关条目。
封装 Axios 实例
为了方便后续维护，建议将 axios 配置集中管理。在 utils 目录下新建 http.js 文件，创建全局实例并配置拦截器：
// axios 基础的封装
import axios from "axios";
const httpInstance = axios.create({
baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
timeout: 5000
})
// 请求拦截器
httpInstance.interceptors.request.use(
config => {
return config
}, e => Promise.reject(e)
)
// 响应拦截器
httpInstance.interceptors.response.use(
res => res.data,
e => {
return Promise.reject(e)
}
)
export default httpInstance
这里主要做了两件事：一是设定了基础地址和超时时间；二是通过拦截器统一处理请求配置和响应数据。响应拦截器直接返回 res.data，这样调用方就不需要再手动解包，代码会更简洁。虽然目前拦截器逻辑比较简单，但预留好位置，后期接入 Token 认证或错误码判断时非常方便。
接口调用测试
封装完成后，可以在组件或 API 文件中按需引入使用。比如在 apis 目录下新建 testAPI.js：
import httpInstance
(){
({
:
})
}