Vue3 项目实战：Axios 基础封装与接口调用

安装依赖

在 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'

  (){
    ({
        : 
    })
}