axios 拦截器和默认值

1. 在Vue原型中加入 axios

在vue页面中，要想使用 axios ，需要在每个页面都引入 axios

import axios from 'axios'

如果想简化这个代码，可以在 main.js 红这个引入 axios ，并将其写入 Vue 的原型

import axios from 'axios'
// 将axios绑定到原型
Vue.prototype.$http = axios

并为其命名为 $http

然后在Vue 中就可不用再引入 axios

但是要使用如下方式使用 axios 与服务器交互

this.$http({
    url: url,
    method: 'get',
    params: {
      query: this.query,
      pagenum: this.current,
      pagesize: this.pagesize
    },
    headers: { Authorization: localStorage.getItem('token') }
  })

2. axios 拦截器

在请求或响应被 then 或 catch 处理前拦截它们

项目中很多页面都要使用 axios 发送请求，我们可以将请求配置中相同的部分写到拦截器中，这样既能够减少代码量，又利于后期的维护

在 main.js 中加入如下代码

import axios from 'axios'
// 将axios绑定到原型
Vue.prototype.$http = axios
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  config.baseURL = 'http://localhost:8888/api/private/v1/'
  config.headers.Authorization = localStorage.getItem('token')
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

上面代码在拦截器中为请求配置了基础url地址和token

然后在 Vue 页面中，使用下面的方式发送请求

this.$http({
    url: 'users',
    method: 'get',
    params: {
      query: this.query,
      pagenum: this.current,
      pagesize: this.pagesize
    }
  })

上面代码，url 的地址变短了，另外，也省略了配置token 的代码，我们与原来的代码对比一下

说明：其他页面的 url 如果仍然使用原来的配置，也不会报错，因为 拦截器会智能判断：

• 如果请求的url是绝对路径（带 http://的路径），则不会干涉
• 如果请求的url是相对路径，向上面那样，则会将 baseUrl 的值进行拼接

3. 默认值

除了使用拦截器，还可以使用默认值实现上面的效果

删除掉拦截器代码，然后加入如下代码

// 配置默认值
axios.defaults.baseURL = 'http://localhost:8888/api/private/v1/'
axios.defaults.headers.common['Authorization'] = localStorage.getItem('token')

虽然两种方式都可以，但是拦截器和默认值是有区别的

• 默认值是在请求发送之前获取的，拦截器是在请求发送过程中获取的
• 在Vue页面中，可以修改默认值，但是拦截器是在发送过程中生效，所以无法修改