vue中axios一般怎么封装

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

1. **创建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' } // 默认请求头
});

2. **封装请求函数**：
创建一些公共的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等

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

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));

4. **使用封装后的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) {
      // 错误处理...
    }
  }
};