vue中axios一般怎么封装

在Vue.js项目中，通常会将axios库进行封装，以便于在组件间统一管理和复用HTTP请求。以下是基本的封装步骤：

创建Axios实例：
首先，在src/utils 或其他合适的地方，导入axios并创建一个全局的axios实例，设置默认配置如超时、headers等。

import axios from 'axios';
const service = axios.create({
baseURL: process.env.BASE_API, // API的URL基础地址
timeout: 5000, // 请求超时时间
headers: { 'Content-Type': 'application/json' } // 默认请求头
});
登录后复制

封装请求函数：
创建一些公共的API方法，如获取数据、添加数据、删除数据等，并在需要的地方使用这些方法。

export function get(url) {
return service.get(url);
}

export function post(url, data) {
return service.post(url, data);
}

export function put(url, data) {
return service.put(url, data);
}

// ...其他HTTP动词，如delete, patch等
登录后复制

错误处理：
添加错误处理函数，统一处理响应状态码、网络异常等情况。

service.interceptors.response.use(
response => {
if (response.data.code === 200) {
return response.data;
}
return Promise.reject(response);
},
error => {
console.log('Error', error.message);
return Promise.reject(error);
}
);

// 如果有需要，可以添加请求拦截器
service.interceptors.request.use(config => config, error => Promise.reject(error));
登录后复制

使用封装后的API：
在需要发起请求的地方，通过导入的模块直接调用封装好的方法即可。

import { get, post } from '@/api';

export default {
async fetchData() {
try {
const res = await get('/users');
// 处理数据...
} catch (error) {
// 错误处理...
}
},
async saveData(data) {
try {
const res = await post('/users', data);
// 处理响应...
} catch (error) {
// 错误处理...
}
}
};
登录后复制