1.  
  2. 主页
  3.  / 
  4. Vue2 教程
  5.  / 
  6. Vue教程之axios 拦截器

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>
这篇文章对您有用吗?

我们要如何帮助您?

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注