Axios封装Post/Get/FileUpload工具

1、封装

import axios from 'axios';
//import { Message } from 'element-ui';

/**
 * 开发环境-专用
 * 本地代理
 */
// const baseURL = process.env.BASE_API;

/**
 * 生产环境-专用
 * Nginx代理
 */
const baseURL = process.env.API_ROOT;

/**
 * 1.创建axios实例
 */
const httpService = axios.create({
  baseURL: baseURL,
  timeout: 5 * 1000,
  headers: {
    "Conten-Type": "multipart/form-data",
  }
});

/**
 * 2.设置请求拦截器
 */
httpService.interceptors.request.use(
  config => {
    /**
     * 根据条件可以让每个请求携带token
     * config.headers['User-Token'] = token;
     */
    // if (true) {
    //   config.headers['User-Token'] = '';
    // }
    return config;
  },
  error => {
    Promise.reject(error);
  }
);

/**
 * 3.设置响应拦截器
 */
httpService.interceptors.response.use(response => {
  const res = response.data;
  if (res.code !== 0 && res.code !== 1) {
    return new Error({
      status: res.code,
      message: res.msg
    });
  } else {
    return res;
  }
},
error => {
  if (error && error.response) {
    switch (error.response.status) {
      case 400:
        error.message = '错误请求';
        break;
      case 401:
        error.message = '未授权，请重新登录';
        break;
      case 403:
        error.message = '拒绝访问';
        break;
      case 404:
        error.message = '请求错误,未找到该资源';
        break;
      case 405:
        error.message = '请求方法未允许';
        break;
      case 408:
        error.message = '请求超时';
        break;
      case 500:
        error.message = '服务器端出错';
        break;
      case 501:
        error.message = '网络未实现';
        break;
      case 502:
        error.message = '网络错误';
        break;
      case 503:
        error.message = '服务不可用';
        break;
      case 504:
        error.message = '网络超时';
        break;
      case 505:
        error.message = 'http版本不支持该请求';
        break;
      default:
        error.message = '未知错误';
    }
  } else {
    error.message = '服务器连接超时';
  }
  /**
   * 全局提示请求异常
   * Message.error(error.message);
   */
  //Message.error(error.message);
  return Promise.reject(error);
});

/**
 * GET
 * @param {} url
 * @param {*} params
 * @returns
 */
export function get (url, params = {}) {
  return new Promise((resolve, reject) => {
    httpService({
      url: url,
      method: 'get',
      params: params
    }).then(response => {
      resolve(response);
    }).catch(error => {
      reject(error);
    });
  });
};

/**
 * POST
 * @param {*} url
 * @param {*} params
 * @returns
 */
export function post (url, params = {}) {
  return new Promise((resolve, reject) => {
    httpService({
      url: url,
      method: 'post',
      params: params
    }).then(response => {
      resolve(response);
    }).catch(error => {
      reject(error);
    });
  });
}

/**
 * 文件上传
 * @param {} url
 * @param {*} params
 * @returns
 */
export function fileUpload (url, params = {}) {
  return new Promise((resolve, reject) => {
    httpService({
      url: url,
      method: 'post'
    }).then(response => {
      resolve(response);
    }).catch(error => {
      reject(error);
    });
  });
}

export default {
  get,
  post,
  fileUpload
};

2、调用

HttpServer.post("/a/u/login", {
    username: this.username,
    password: this.password,
}).then((response) => {
    if (0 === response.code) {
        //动画
        this.$toast.loading({
            loadingType: "ring",
            msg: "加载中...",
        });
        this.$store.commit("saveToken", {
            token: response.data.token,
        });
        setTimeout((_) => {
            this.$router.replace("/home");
        }, 1500);
    } else {
        this.$toast.error(response.msg);
    }
});