VUE3 axios

### Vue3 和 Axios 的集成与使用教程 在现代前端开发中，Vue3 是一个非常流行的框架，而 Axios 则是一个功能强大的 HTTP 客户端库。将两者结合可以高效地进行数据请求和交互[^1]。 #### 1. 安装 Axios 首先需要安装 Axios。可以通过 npm 或 yarn 来完成安装： ```bash npm install axios ``` 或者 ```bash yarn add axios ``` #### 2. 配置 Axios 实例 为了便于管理全局配置，通常会创建一个独立的 Axios 实例。这可以通过以下代码实现： ```javascript import axios from 'axios'; const instance = axios.create({ baseURL: 'https://api.example.com', // 设置 API 的基础 URL timeout: 5000, // 请求超时时间 headers: { 'Content-Type': 'application/json', Authorization: 'Bearer your_token_here' // 如果需要身份验证，可在此设置 Token } }); export default instance; ``` 此代码定义了一个 Axios 实例，并设置了基础 URL、超时时间和请求头等全局配置[^1]。 #### 3. 在 Vue3 中集成 Axios 接下来，需要将 Axios 集成到 Vue3 应用中。可以通过插件的形式实现，确保整个应用都可以访问 Axios 实例。 创建 `plugins/axios.js` 文件： ```javascript import axiosInstance from '../services/axios'; // 假设 Axios 实例存储在 services/axios.js 中 export default { install(app) { app.config.globalProperties.$axios = axiosInstance; } }; ``` 然后在 `main.js` 中引入并使用该插件： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import axiosPlugin from './plugins/axios'; const app = createApp(App); app.use(axiosPlugin); // 注册 Axios 插件 app.mount('#app'); ``` #### 4. 使用 Axios 进行数据请求 在组件中可以直接通过 `this.$axios` 访问 Axios 实例。例如，在一个 Vue3 组件中发起 GET 请求： ```javascript <template> <div> <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> export default { data() { return { items: [] }; }, async created() { try { const response = await this.$axios.get('/items'); // 调用 API 获取数据 this.items = response.data; // 将返回的数据赋值给 items } catch (error) { console.error('Error fetching data:', error); } } }; </script> ``` #### 5. 处理错误和拦截器 Axios 提供了拦截器功能，可以在请求发送前或响应接收后执行特定逻辑。例如，添加请求和响应拦截器以处理通用问题： ```javascript import axiosInstance from './axios'; // 添加请求拦截器 axiosInstance.interceptors.request.use( config => { console.log('Request Interceptor:', config); return config; }, error => { return Promise.reject(error); } ); // 添加响应拦截器 axiosInstance.interceptors.response.use( response => { console.log('Response Interceptor:', response); return response; }, error => { console.error('Error Interceptor:', error); return Promise.reject(error); } ); ``` 通过上述方法，可以更优雅地处理请求和响应中的异常情况[^1]。 --- ###