安装依赖
在 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 from '@/utils/http'
(){
({
:
})
}


