vue中axios的封装

### 封装 Axios 的示例代码 在 Vue 中封装 Axios 可以显著提升代码的复用性和可维护性。以下是详细的封装过程以及完整的代码实现。 #### 1. 创建 Axios 实例并配置基础选项 通过创建一个独立的文件 `axiosInstance.js` 来初始化 Axios 并设置全局配置，例如超时时间、Base URL 和拦截器等。 ```javascript // axiosInstance.js import axios from 'axios'; const instance = axios.create({ baseURL: 'https://api.example.com', // 设置 API 基础路径 timeout: 5000, // 请求超时时间为 5 秒 }); // 添加请求拦截器 instance.interceptors.request.use( (config) => { // 在发送请求之前做些什么，比如添加 token 到 headers const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, (error) => { // 对请求错误做些什么 return Promise.reject(error); } ); // 添加响应拦截器 instance.interceptors.response.use( (response) => { // 对响应数据做点什么 return response.data; // 返回响应中的 data 部分 }, (error) => { // 对响应错误做点什么 if (error.response && error.response.status === 401) { console.log('Token expired or invalid.'); // 处理未授权的情况，如跳转登录页 } return Promise.reject(error); } ); export default instance; ``` [^1] #### 2. 定义通用的服务层接口 为了进一步抽象化 HTTP 请求逻辑，可以定义一组基于业务需求的方法。这些方法可以直接被组件调用而无需关心底层细节。 ```javascript // apiService.js import instance from './axiosInstance'; class ApiService { get(url, params) { return instance.get(url, { params }); } post(url, data) { return instance.post(url, data); } put(url, data) { return instance.put(url, data); } delete(url) { return instance.delete(url); } } export default new ApiService(); ``` [^2] #### 3. 注册到 Vue 原型链以便全局访问 为了让所有的 Vue 组件都能方便地使用该服务，可以在项目的入口文件中将其挂载至 Vue 的原型对象上。 ```javascript // main.js import Vue from 'vue'; import App from './App.vue'; import router from './router'; import store from './store'; import ApiService from './services/apiService'; // 导入自定义的服务 Vue.config.productionTip = false; // 挂载到 Vue 原型上 Vue.prototype.$api = ApiService; new Vue({ router, store, render: h => h(App), }).$mount('#app'); ``` [^3] #### 4. 使用封装后的 Axios 进行网络请求 最后，在任何 Vue 组件内部都可以轻松发起请求而不必重复编写相同的代码片段。 ```javascript <template> <div>{{ products }}</div> </template> <script> export default { name: 'ProductList', data() { return { products: [], }; }, mounted() { this.fetchProducts(); }, methods: { fetchProducts() { this.$api.get('/products').then((data) => { this.products = data || []; }).catch((err) => { console.error(err.message); }); }, }, }; </script> ``` [^4] --- ###