axios封装

先建立 api文件夹
下面建立config.js

export default {
    // 全局配置baseURL
    baseURL:'http://47.102.209.216:9999',
    withCredentials:true
}

再建立index.js

import Vue from 'vue'
import axios from 'axios'
import config from './config'
import router from '../router'

//因为Vue的底层原理也是往js原型上挂载方法,所以我们可以把axios挂载在全局
Vue.prototype.$http = axios;
// // 全局配置baseURL
// axios.defaults.baseURL = 'http://www.litc.pro:9999/v1';
//循环获取config对象的所有属性
//将所有属性赋值给axios.defaults
//自动挂载config的配置到axios默认配置中
for(const k in config){
    axios.defaults[k]=config[k]
    console.dir(config[k])
}
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    let token = localStorage.getItem('token')||''
    config.headers.Authorization = token
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
  
  // 添加响应拦截器
  axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    //console.log(response.data)
    response = response.data
    return response;
  }, function (error) {
    // 对响应错误做点什么
    Vue.prototype.$message({
      showClonse:true,
      type:'error',
      message:error.response.data.errMsg
    })
    return Promise.reject(error);
  });
  export default axios

然后mian.js 引入 或者 创建一个apiRouter.js

import './api'

mian demo演示:

 this.$http.get("/users/getVCode").then(result => {
        this.vCodeSvg = result;
      });

apiRouter

import $http from '@/api/index';
export const ubussiteinfo  = () =>{ return $http.get('/admin/ubussiteinfo/info')}

调用demo

 import { ubussiteinfo } from '../api/apiRouter';

 created(){
    ubussiteinfo().then(res=>{
      console.log(res)
    })
  },

[外链图片转存失败(img-BIQO2uMu-1563032913040)(https://wangmiao1225.oss-cn-beijing.aliyuncs.com/images/QQ图片20190713234517.jpg?Expires=1563036502&OSSAccessKeyId=TMP.hWvY2MNt7Bmcg9FSATkdxtYfmnTfTrYcJ2L2Yz4ZyJh5RCZ4ryAyHJfsrZkwBi12sYnscs4NVZC8QKFz62nGGgu5ZF5ic9zpjvmeWf3roZkeb1NN8edjLYEetCiYdp.tmp&Signature=%2BduOB7ddNGj9HavezGtG7Uh50vk=)]