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 })