菜鸟教程
教程 axios tutorial

在 Vue3 中集成 Axios

在 Vue3 中使用 Axios 是前端项目最常见的网络请求方案。通过合理封装，可以实现全局请求配置、拦截器、错误处理等功能。

1. 安装 Axios

bash 
npm install axios
# 或者使用 yarn
yarn add axios

`

2. 在 main.js 中注册全局 Axios 实例

在 Vue3 项目中，可以通过 app.config.globalProperties 或 provide/inject 将 Axios 全局注入。

javascript 
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';

const app = createApp(App);

// 设置基础配置
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 10000;

// 全局挂载
app.config.globalProperties.$axios = axios;

app.provide('axios', axios);
app.mount('#app');

3. 在组件中使用 Axios

方法一：通过 this.$axios

vue 
<script setup>
import { getCurrentInstance } from 'vue';

const { proxy } = getCurrentInstance();

async function getUserData() {
  const res = await proxy.$axios.get('/user/info');
  console.log(res.data);
}
</script>

<template>
  <button @click="getUserData">获取用户信息</button>
</template>

方法二：使用 inject 获取

vue 
<script setup>
import { inject } from 'vue';

const axios = inject('axios');

async function fetchData() {
  const res = await axios.get('/posts');
  console.log(res.data);
}
</script>

<template>
  <button @click="fetchData">加载数据</button>
</template>

4. 封装请求模块

在大型项目中，建议在 src/utils/request.js 中封装 Axios：

javascript 
// src/utils/request.js
import axios from 'axios';

const service = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 8000,
});

service.interceptors.response.use(
  res => res.data,
  err => Promise.reject(err)
);

export default service;

然后在组件中使用：

javascript 
import request from '@/utils/request';

request.get('/api/list').then(data => {
  console.log(data);
});

5. 最佳实践建议

  • ✅ 使用 .env 文件区分开发与生产环境；
  • ✅ 封装通用的请求模块，减少重复代码；
  • ✅ 结合拦截器统一处理 Token 与错误提示；
  • ✅ 在组合式 API 中可直接 inject('axios') 或使用封装模块。

💡 小提示：在 Vue3 + Vite 项目中，推荐使用 import.meta.env 管理 API 地址与环境变量，结合 Axios 实现灵活、可维护的网络层结构。

相关内容