otb-module/src/utils/request.js

otb-module是基于现有的element-ui库进行的二次封装，简化组件的各自用法，将所有基础组件归纳于一个表单中， 集成表单组件，另还有增删改查的CRUD组件、预览图片/PDF的preview组件、上传文件的upload组件、分页组件与导出组件等等。 引入组件后以数据驱动组件从而加载Dom，让开发变得更简单，让代码更易维护。

// axios二次封装
import axios from "axios";
import store from '@/store'
import {Message} from "element-ui";

axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  // 请求超时时间
  timeout: 5000
});

// request 拦截器
axios.interceptors.request.use(
  config => {
    const token = store.state.token;
    if (token) config.headers['Token'] = token;
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// response 拦截器
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error) {
      // 服务器有返回内容
      let msg;
      switch (error.response.status) {
        case 400:
          msg = "错误请求";
          break;
        case 401:
          msg = "未登录,请重新登录";
          break;
        case 403:
          msg = "拒绝访问";
          break;
        case 404:
          msg = "请求错误，未找到该资源";
          break;
        case 405:
          msg = "请求方法未允许";
          break;
        case 408:
          msg = "请求超时";
          break;
        case 500:
          msg = "服务器出错";
          break;
        case 501:
          msg = "网络未实现";
          break;
        case 502:
          msg = "网络错误";
          break;
        case 503:
          msg = "服务不可用";
          break;
        case 504:
          msg = "网络超时";
          break;
        case 505:
          msg = "http版本不支持该请求";
          break;
        default:
          msg = "连接错误";
      }
      Message({type: "warning", message: msg, offset: 100});
      return false;
    } else {
      // 服务器连结果都没有返回  有可能是断网或者服务器奔溃
      if (!window.navigator.onLine) {
        // 断网处理
        Message({type: "warning", message: "网络中断...", offset: 100});
        return false;
      } else {
        // 服务器崩溃
        Message({type: "warning", message: "服务器崩溃了...", offset: 100});
        return Promise.reject(error);
      }
    }
  }
);

// 请求方式的封装
export default {
  // get请求
  get(url, params) {
    return new Promise((resolve, reject) => {
      axios.get(url, {params: params}).then(res => {
        resolve(res.data);
      }).catch(err => {
        reject(err.data);
      });
    });
  },
  // delete请求
  delete(url, params) {
    return new Promise((resolve, reject) => {
      axios.delete(url, {data: params}).then(res => {
        resolve(res.data);
      }).catch(err => {
        reject(err.data);
      });
    });
  },
  // post请求
  post(url, params) {
    return new Promise((resolve, reject) => {
      axios.post(url, params).then(res => {
        resolve(res.data);
      }).catch(err => {
        reject(err.data);
      });
    });
  },
  // patch请求
  patch(url, params) {
    return new Promise((resolve, reject) => {
      axios.patch(url, params).then(res => {
          resolve(res.data);
        },
        err => {
          reject(err);
        }
      );
    });
  },
  // put的请求
  put(url, params) {
    return new Promise((resolve, reject) => {
      axios.put(url, params).then(res => {
          resolve(res.data);
        },
        err => {
          reject(err);
        }
      );
    });
  }
};