Vue中axios有关请求头的几点小结

　　在Vue前端中向后端发起http请求会有着两种写法：一种是在vue文件中直接导入axios模板，另外一种是使用Vue的属性$http。

　　1、在第一种方式中，在同一个工程中所添加的vue文件直接使用axios对象发起http请求时都会拥有相同的请求头信息，只要我们在main.js文件中设置好Axios模块对象axios的headers信息即可； 但是在该工程中若是使用了组件库模块，那么在组件库模块中直接使用axios对象时不会继承父组件的请求头信息，此时需要在组件库中主动添加相关的请求头信息。eg:

（1）在main.js文件中导入axios模块
 import axios from 'axios'

 设置axios请求头属性，例如(这里只列举了两个请求头属性值的设置)：

   axios.defaults.headers['X-Emp-No'] = '111111'

   axios.defaults.headers['X-Auth-Value'] = 'aaaaaaaaaaaa'

（2）在A.vue文件中导入axios模块
 import axios from 'axios'
 在A文件中利用axios直接发起http请求，如：
 axios({
    url: httpUrlA,
    method: 'get'
 })

 　此时，在上述的请求头中可以发现X-Emp-No和X-Auth-Value信息。

  （3）A.vue文件中应用了组件库，而组件库中B.vue文件中导入axios模块

   impmort axios from 'axios'

   在B文件中利用axios直接发起http请求，如：

　　axios({

　　　　url: httpUrlB,

　　　　method: 'get'

　 }).then()

     .catch()

   此时，在上述的请求中不会发现X-Emp-No和X-Auth-Value信息（前提是在组件库中没有设置axios.defaults.headers属性信息）

　　2、在第二种方式中，首先在main.js文件中导入Axios模板，然后对axios对象的headers属性设置好相关请求头信息，最后将axios对象赋值给Vue.prototype.$http的全局属性；此时，不管是同一个工程中所有的vue文件，还是组件库中的vue文件，只要使用this.$http的方式发起请求的话，那么都会继承相同的请求头信息。若在同一个工程的vue文件是直接使用axios对象发起请求的话，也会继承$http的请求头信息的；若是在组件库中直接使用axios对象发起请求的话，就不会继承父组件的$http的请求头信息了。eg:

（1）在main.js文件中导入axios模块
 import axios from 'axios'

 设置axios请求头属性，例如(这里只列举了两个请求头属性值的设置)：

   axios.defaults.headers['X-Emp-No'] = '111111'

   axios.defaults.headers['X-Auth-Value'] = 'aaaaaaaaaaaa'

   同时添加这样的全局属性：Vue.prototype.$http = axios

（2）在A.vue文件直接利用$http属性发起http请求，如：
 this.$http({
    url: httpUrlA,
    method: 'get'
 })

 　此时，在上述的请求头中可以发现X-Emp-No和X-Auth-Value信息。

  （3）A.vue文件中应用了组件库，而组件库中B.vue文件中直接利用$http属性发起http请求，如：

　　this.$http({

　　　　url: httpUrlB,

　　　　method: 'get'

　 }).then()

     .catch()

   此时，在上述的请求头中也是可以发现X-Emp-No和X-Auth-Value信息，这说明了通过这种方式发起请求，组件库是继承了父组件的属性了，这是因为Vue.prototype.$http属性是全局的。

 

　　说明，建议最好采用$http全局属性的方式进行http请求，这样可以统一管理请求头信息，不会遗漏某些接口请求时没有添加请求头信息了。

 

------20191223闪🚶