axios學習筆記

1.將axios掛載到Vue原型上,實現組件的直接使用

背景:Vue中多組件每次都須要

import axios from 'axios'

後才能使用axios發送請求,在項目入口main.js中能夠採用將axios掛載到Vue原型上,這樣組件(Vue的實例)就能夠直接訪問了

//main.js中引入一次,並掛載
import axios from 'axios'
Vue.prototype.$http = axios

//在其餘組件中能夠直接使用
this.$http(url地址,參數).then()....

2.配置axios請求地址的公共路徑以簡化代碼

//在入口文件main.js中配置
axios.defaults.baseURL = '公共路徑'

//在組件中使用時
axiso.('/後綴路徑',參數).then()...

3.axios的請求攔截器與響應攔截器

背景:當每次請求數據都要設置請求頭信息時,採用請求攔截器實現請求頭設置以簡化代碼

axios.interceptors.request.use(function (config) {
  //    console.log('請求已經被攔截')
  console.log(config)
  if (!config.url.endsWith('/login')) {
    config.headers.Authorization = localStorage.getItem('token')
  }
  return config
})

響應攔截器(暫時還不太理解這個的用法)(當token信息驗證失敗,直接跳轉到登陸頁)

axios.interceptors.response.use(function (response) {
  //    console.log('響應已經被攔截')
  console.log(response)
  if (response.data.meta.status === 401) {
    router.push('/login')
    localStorage.removeItem('token')
  }
  return response
})