vue2axios封装

在Vue2中使用axios进行网络请求的封装，可以方便地统一处理请求和响应，提高代码复用性和可维护性。以下是一个简单的示例： 1. 安装axios和vue-axios： ```bash npm install axios vue-axios ``` 2. 在main.js中引入并配置axios和vue-axios： ```javascript import axios from 'axios'; import VueAxios from 'vue-axios'; Vue.use(VueAxios, axios); ``` 3. 创建一个api.js文件，用于封装接口请求方法： ```javascript import axios from 'axios'; const apiClient = axios.create({ baseURL: 'http://api.example.com/', // 设置基本URL timeout: 5000 // 设置请求超时时间 }); export const get = (url, params) => { return apiClient.get(url, { params }); }; export const post = (url, data) => { return apiClient.post(url, data); }; ``` 4. 在组件中使用封装的接口请求方法： ```javascript import { get, post } from '@/api'; export default { methods: { fetchData() { get('/data').then(response => { // 处理成功响应 console.log(response.data); }).catch(error => { // 处理错误响应 console.error(error); }); }, submitData() { const data = { /* 数据对象 */ }; post('/data', data).then(response => { // 处理成功响应 console.log(response.data); }).catch(error => { // 处理错误响应 console.error(error); }); } } }; ``` 这样，你就可以在Vue组件中方便地调用封装好的get和post方法进行网络请求了。注意，在实际项目中，你可能还需要处理loading状态、错误处理、请求拦截、响应拦截等功能，这些可以根据具体需求进行补充和扩展。