axios HttpClient数据请求封装callback

第三方依赖：npm install axios --save;

封装方法(HttpClient.js):
import axios from 'axios';
import BaseInfo from "../config/BaseInfo";

/***
 * http数据请求类，本方法适用于第三方接口后台跨域，前端只暴露一个Ip
 */
export default class HttpcClient {
  /**
   * 获取token的方法
   * @returns {string}
   */
  static getToken() {
    const token = localStorage.getItem("token");
    return token ? token : '';
  }

  /**
   * 设置头部信息
   * @param type 请求头类别 0：为普通请求，1为文件上传
   */
  static setHeader(type) {
    const headers = {
      'Content-Type': 'application/json;charset=utf-8',
      Authorization: this.getToken()
    };
    if (type === 1) {
      headers["Content-Type"] = 'multipart/form-data';
    }
    return axios.create({
      baseURL: BaseInfo.baseUrl,
      withCredentials: false,
      headers: headers
    })
  }

  /**
   * 发送http数据氢气
   * @param type 请求头类别
   * @param method 请求方法
   * @param url 类地址
   * @param params 请求参数
   * @param callback 数据回调函数
   */
  static sendHttp(type,method,url,params,callback){
    this.setHeader(type)({
      method: method,
      url: url,
      timeout: 40000,
      data: method === 'POST'? params : null,
      params: method === 'GET'? params : null,
    }).then(res => {
      callback(res.data);
    }).catch(() => {
      callback({
        code: 500,
        message: "请求地址异常或服务器异常！",
        t: null
      });
    })
  }

  /**
   * GET数据请求方式
   * @param url 数据类地址
   * @param data 请求参数
   * @param callbak 数据回调函数
   */
  static get(url,data,callbak){
    return this.sendHttp(0,'GET',url,data,callbak);
  }

  /**
   * POST数据请求方式
   * @param url 数据类地址
   * @param data 请求参数
   * @param callbak 数据回调函数
   */
  static post(url,data,callbak){
    return this.sendHttp(0,'POST',url,data,callbak);
  }
  /**
   * POST数据请求方式,上传文件
   * @param url 数据类地址
   * @param data 请求参数
   * @param callbak 数据回调函数
   */
  static file(url,data,callbak){
    return this.sendHttp(1,'POST',url,data,callbak);
  }
}

 

接口地址（BaseInfo.js）：
const baseUrl = "";
export default {
  baseUrl:baseUrl,
  login:''
}

 

添加Vue属性（main.js）：

// 基础接口类信息

Vue.prototype.baseInfo=BaseInfo;

// ttpcClient数据请求方法类

Vue.prototype.httpClient=HttpcClient;

 

方法调用(Login.vue)：

this.httpClient.post(this.baseInfo.login,{

password: '',

phoneOrEmail: ''           

 },res=>{

console.log(res);

});