axios简单封装

1.首先在项目目录下安装axios

1. 使用npm命令安装axios
   npm install axios

2.在main.js中引入axios文件

import axios from 'axios'; // 引入axios
Vue.prototype.$http = axios //把axios注入到vue原型中方便以后调用
Vue.prototype.$http = axios.create({  //创建实例配置基本参数
          timeout: 10000,//请求超时时间
          headers: {'Content-Type': 'application/json;charset=UTF-8'}
    })

   // 根基当前运行的环境设置请求地址
if (process.env.NODE_ENV == 'development') {
    axios.defaults.baseURL = 'https://www.baidu.com'
} else if (process.env.NODE_ENV == 'debug') {
    axios.defaults.baseURL = 'https://www.ceshi.com'
} else if (process.env.NODE_ENV == 'production') {
    axios.defaults.baseURL = 'https://www.lingfeng666.com'
}

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
   config => {
     var token = localStorage.getItem('token');//获取token
     token && (config.headers.Authorization = token);// 判断token如果存在，则每个请求头的header中都加上token
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

3.请求接口api管理

// 邀请码校验
export function CheckInvitationCode(query) {
    return $http({
        url: 'User/CheckInvitationCode',
        method: 'post',
        data: Qs.stringify(query)
    })
}

// 登录
export function GetUserLogin(query) {
    return $http({
        url: 'User/GetUserLogin',
        method: 'post',
        data: Qs.stringify(query)
    })
}