【Axios封装示例Vue2】

为什么要封装axios？

在Vue 2项目中，直接在组件中使用axios可能会导致以下问题：

1. 代码重复：每个组件都需要导入axios并编写相似的请求代码，这样代码会变得冗长且难以维护。
2. 难以管理：当应用的规模增大时，维护多个请求和拦截器变得复杂。
3. 可扩展性差：如果需要全局配置或拦截请求，每个组件都需要手动设置。

封装axios是一种解决这些问题的方式。

如何封装axios

创建一个独立的模块来封装axios，这个模块可以包含全局配置、拦截器、通用的错误处理等。

// axios.jsimport axios from 'axios';const instance = axios.create({baseURL: 'https://api.example.com',timeout: 5000,
});// 请求拦截器
instance.interceptors.request.use(config => {// 添加请求头或其他全局配置return config;
}, error => {return Promise.reject(error);
});// 响应拦截器
instance.interceptors.response.use(response => {// 处理响应数据return response.data;
}, error => {// 处理错误return Promise.reject(error);
});export default instance;

在Vue组件中使用封装的axios

在Vue组件中使用封装后的axios，而无需在每个组件中导入和配置axios。只需导入封装模块并发出请求：

// MyComponent.vue<template><!-- your template code here -->
</template><script>
import axios from './axios'; // 导入封装后的axiosexport default {methods: {fetchData() {axios.get('/data').then(data => {// 处理数据}).catch(error => {// 处理错误});}},// ...
}
</script>

这种封装方法使得代码更加模块化，易于维护和扩展。可以在封装的axios中添加任何全局配置或拦截器，以满足项目的特定需求。