# 在 Vue3 中集成 Axios

URL: https://caijiao.org/axios/in-framework/vue3
Source: docs/axios/in-framework/vue3.md
Description: 本章节讲解如何在 Vue3 项目中集成 Axios，包括在 main.js 中全局注册、使用 provide/inject、封装通用请求模块，并在组件中优雅地调用接口。

在 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


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

### 方法二：使用 `inject` 获取

```vue


<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 实现灵活、可维护的网络层结构。