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 拦截器

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

项目中很多页面都要使用 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页面中,可以修改默认值,但是拦截器是在发送过程中生效,所以无法修改
我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章