Vue教程之axios 拦截器

对于大多数应用来说，都会遇到要统一处理ajax请求的场景，为了较好地解决这个问题，拦截器就应运而生了。
在Axios中它提供了请求拦截器和响应拦截器来分别处理请求和响应，它们的作用如下：

• 请求拦截器：该类拦截器的作用是在请求发送前统一执行某些操作，比如在请求头中添加 token 字段。
• 响应拦截器：该类拦截器的作用是在接收到服务器响应后统一执行某些操作，比如发现响应状态码为 401 时，自动跳转到登录页。

实例演示

<template>
  <div>
    <h1>Demo4</h1>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  created () {
    // 请求拦截器
    axios.interceptors.request.use((config) => {
      config.headers.token = 'asdqwe123'
      return config
    })

    // 响应拦截器
    axios.interceptors.response.use(res => {
      console.log('response：', res.data)
      return res
    })
  },
  mounted () {
    this.handleAxios()
  },
  methods: {
    handleAxios () {
      axios.get('/data.json').then(res => {
        console.log(res.data)
      })
    }
  }
}
</script>