axios的拦截请求与响应-interceptors

请求拦截器
请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易

响应拦截器
响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。

// 请求拦截（配置发送请求的信息）
axios.interceptors.request.use(function (config) {
  // 处理请求之前的配置
  return config
}, function (error) {
  // 请求失败的处理
  return Promise.reject(error)
})

// 响应拦截（配置请求回来的信息）
axios.interceptors.response.use(function (response) {
  // 处理响应数据
  return response
}, function (error) {
  // 处理响应失败
  return Promise.reject(error)
})

// 移除拦截器
var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);


// axios转发 //其他页面在使用axios的时候直接  this.$axios就可以了
Vue.prototype.$axios = axios

//可简写
axios.interceptors.request.use( (config)=> {
  // 处理请求之前的配置
  return config
}, (error)=> {
  // 请求失败的处理
  return Promise.reject(error)
})

 调用

methods: {
    getInfo () {
      this.$axios.get('/fcg_myqq_toplist.fcg', {
        headers: {
          'authorization': this.token
        },
        params: {
          g_tk: 5381,
          uin: 0,
          format: 'json',
          inCharset: 'utf-8',
          outCharset: 'utf-8',
          notice: 0,
          platform: 'h5',
          needNewCode: 1
        }
      }).then((res) => {
        this.discList = res.data.data.topList
        console.log(this.discList)
      }).catch((err) => {
        console.log(err.response.status)
      })
    }
  },

config\index.js配置跨域

proxyTable: {
      '/api':{
        target: "https://c.y.qq.com/v8/fcg-bin",
        changeOrigin:true,
        pathRewrite:{
          '^/api':''
        }
      }
    },

main.js

Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api'
axios.defaults.headers.post['Content-Type'] = 'application/json'