在vue中封装axios

1.将 axios 添加到Vue的原型中

将 axios 添加到Vue的原型中
实例对象可以直接使用原型对象中的属性或方法
所有的组件都是Vue的实例
说明: 只要是像 axios 这样的第三方库(与Vue没有任何关系),都应该通过这种方式来统一导入

import axios from 'axios'
Vue.prototype.$http = axios

然后在组件中就用this.$http代替axios

2.配置公共路径

axios.defaults.baseURL = 'http://localhost:8888/api/private/v1'

然后在组件的路径可以写成这样

3.添加axios拦截器来添加配置请求头

** 只要配置了拦击器, 那么所有的请求都会走拦截器
拦击器包含“请求拦截器”和“响应拦截器”
因此,可以在拦截器中统一处理 headers**

// 在请求发送之前做一些事情，所以可以在请求函数中处理header
// endsWith 字符串的方法,用来判断是不是以参数为结尾,如果是返回值为true
// 判断如果是登录接口,就不需要添加 Authorization 请求头

axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });


axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });

**注意：1.要做的事件都要写在return前面
2.请求拦截器是还没有后台返回数据，而相应拦截器却有返回后台数据
**
设置后在组件的headers属性就可以删除了

然后我们还可以在响应拦截器中设置,防止假冒token