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閃🚶