背景

vue项目经常会用到axios来请求数据，那么首先肯定需要对这个请求方法进行一个二次封装，这样能节省不必要的重复操作和过度冗余的代码。

使用

import request from '@/utils/request';
export function pageList(params) {
  return request.get('item/importlog/search', { params: { ...params }});
}
export function searchItemNum(params) {
  return request.post(/item/es/count', {  ...params });
}
export function deleteBatch(id, params) {
  return request.delete(`/collection/items/delete/${id}`, { params: { ...params }} )
}

二次封装实现

在require.js里：

import axios from 'axios';
import options from './requestOptions/index';

// 创建axios实例
const service = axios.create({
  baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : '/api',
  withCredentials: true,
  timeout: 30000 // 请求超时时间
});

service.interceptors.request.use(options.request.requestCallBack, options.request.errorCallback);
service.interceptors.response.use(options.response.responseCallback, options.response.errorCallback);

export default service;

在/requestOptions/index.js里：

const options = {
  request: {
    requestCallBack: config => {
      if (store.getters.token) {
        config.headers['Authentication'] = getToken(); // 让每个请求携带自定义token
      }
      return config;
    },
    errorCallback: error => {
      // Do something with request error
      console.log(error); // for debug
      Promise.reject(error);
    }
  },
  response: {
    responseCallback: response => {
      const res = response.data;
      // 用于业务相关接口错误提示
      if (res.code && (res.code !== 0 && res.code !== 200) && lang.t('code.' + res.code)) {
        //一些处理
                return res;
      }
      if (!res.success && res.returnCode && res.returnCode === '100799‘) {
        //一些处理
        return;
      }
      if (response.config.responseType === 'blob') {
        return response;
      }
      return response.data;
    },
    errorCallback: error => {
      console.log('err' + error); // for debug
      Message({
        message: error.message,
        type: 'error',
        duration: 3 * 1000
      });
      return Promise.reject(error);
    }
  }
};

export default options;