vue axios封装

// axios封装示例代码

// 引入axios
import axios from 'axios';

// 创建axios实例
const service = axios.create({
  // 设置默认请求头
  headers: { 'Content-Type': 'application/json' },
  // 设置超时时间
  timeout: 5000,
  // 可以设置基础url，方便后续接口调用
  baseURL: process.env.VUE_APP_BASE_API
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    // 比如可以在每次请求时添加token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    const res = response.data;
    // 如果返回的状态码不是200，说明接口请求有问题，可以统一处理
    if (res.code !== 200) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      });
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;
    }
  },
  error => {
    // 对响应错误做点什么
    console.log('err' + error); // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    });
    return Promise.reject(error);
  }
);

// 封装get请求
export function get(url, params = {}) {
  return new Promise((resolve, reject) => {
    service.get(url, { params })
      .then(response => {
        resolve(response);
      })
      .catch(error => {
        reject(error);
      });
  });
}

// 封装post请求
export function post(url, data = {}) {
  return new Promise((resolve, reject) => {
    service.post(url, data)
      .then(response => {
        resolve(response);
      })
      .catch(error => {
        reject(error);
      });
  });
}

解释说明：

1. 创建axios实例：通过axios.create方法创建了一个自定义的axios实例，并设置了默认配置，例如超时时间和基础URL。
2. 请求拦截器：在请求发送前进行一些预处理操作，比如添加认证token。
3. 响应拦截器：对响应数据进行处理，如果状态码不是200，则返回错误信息，并且可以通过全局提示组件（如Element UI的Message）显示错误信息。
4. 封装get和post请求：为了简化请求调用，封装了常用的GET和POST请求方法，直接返回Promise对象，便于后续使用。

这样封装后，可以直接在项目中导入这些方法来发起HTTP请求，而不需要每次都重复编写相同的代码。