axios拦截器

作者: 姜治宇 | 来源:发表于2018-10-26 15:15 被阅读1次

    拦截器

    vue一般都搭配axios这个工具来做http请求,有时我们需要配置一些全局参数,比如token啦,设置超时时间啦,未登录状态踢出啦等等。
    这些参数的设置,当然不可能一个一个请求加了,否则累的吐血也不一定能达到目的,最好的办法就是通过拦截器让每个请求都可以加上配置参数。
    以下是一个简单的案例:

    import axios from 'axios'
    axios.defaults.timeout = 10000 // 超时时间
    let VueCookie = require('vue-cookie')
    let cookieVue = VueCookie.get('x_auth_token') // 获取cookie
    axios.interceptors.request.use(
      config => {
        config.headers['X-Auth-Token'] = cookieVue
        config.headers['Content-Type'] = 'application/json' 
        return config
      },
      error => {
        alert('请求超时,请稍后重试!')
        return Promise.reject(error)
      }
    )
    // http响应拦截器
    axios.interceptors.response.use(res => {
      if (res.data.bodyObj && res.data.bodyObj.code) {
        let code = res.data.bodyObj.code
        // 10101是未登录状态码
        if (code === 10101) { // 如果是未登录直接踢出去
          location.href = '/login.html'
        }
      }
      return res
    },
    error => {
      alert('请求失败,请稍后重试!')
      return Promise.reject(error)
    }
    )
    
    export default axios
    

    相关文章

      网友评论

        本文标题:axios拦截器

        本文链接:https://www.haomeiwen.com/subject/monktqtx.html