vue2封装axios请求接口

在Vue 2中，我们可以使用axios库来处理HTTP请求，将其封装成自定义的API组件可以使代码更简洁、易管理。以下是创建一个基本的axios封装示例： 首先，需要安装axios库： ```bash npm install axios ``` 然后，在`src/api.js` 或 `src/utils` 等文件中创建一个axios实例并暴露一些基础的接口方法： ```javascript import axios from 'axios'; // 创建axios实例并配置默认选项 const service = axios.create({ baseURL: process.env.VUE_APP_API_URL || 'http://your-api-url.com', // API地址 timeout: 5000, // 请求超时时间（单位：ms） headers: { 'Content-Type': 'application/json' } // 默认请求头 }); // 定义公共响应拦截器 service.interceptors.request.use( config => { // 在发送请求之前做些什么 return config; }, error => { // 对请求错误做些什么 console.error('Request failed with error', error); Promise.reject(error); } ); // 定义公共响应拦截器 service.interceptors.response.use( response => { // 如果请求成功，处理响应数据 return response.data; }, error => { // 处理网络错误和状态码不是2xx的情况 if (error.response.status) { console.error(`Error ${error.response.status}: ${error.response.statusText}`); } else { console.error('Something went wrong in Axios request.'); } Promise.reject(error); } ); // 封装常用的方法，如获取数据、添加数据等 export const get = (url, params) => service.get(url, { params }); export const post = (url, data) => service.post(url, data); export default service; ``` 现在你可以通过导入这个服务，在Vue组件中像这样使用封装后的API： ```javascript import { get, post } from '@/api'; export default { data() { return { users: [] }; }, async created() { try { this.users = await get('/users'); } catch (error) { console.error(error); } }, methods: { addUser(user) { try { const response = await post('/users', user); // 更新状态或其他操作... } catch (error) { console.error(error); } } } }; ```