axios拦截器

最新推荐文章于 2025-04-11 15:04:10 发布

原创最新推荐文章于 2025-04-11 15:04:10 发布 · 256 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#axios拦截器

Vue 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了 Axios 的请求和响应拦截器的使用方法，包括如何在请求前设置自定义头部信息以及如何在响应后对数据进行预处理，为开发者提供了实际应用的代码示例。

1、请求拦截器

2、响应拦截器

1、请求拦截器

1.1 在请求出发之前设置一些信息

格式：

    aixos.interceptors.request.use(function(config){

        //在请求出发之前进行一些设置

        return config；

    }，function(err){

        //处理响应的错误信息
        console.log(err)

    })

实例：

    aixos.interceptors.request.use(function(config){

        //在请求出发之前进行一些设置

        config.headers.mytoken='test'

        return config；

    }，function(err){

        //处理响应的错误信息
        console.log(err)

    })

    axios.get('http://host/port/path').then(function(data){

        console.log(data)

    })

2、响应拦截器

2.1 在获取数据之前对数据做一些加工处理

格式：

    aixos.interceptors.response.use(function(res){

        //在这里对返回的数据进行处理

        return res；

        }，function(err){

        //处理响应的错误信息
        console.log(err)

    })

实例：

    aixos.interceptors.response.use(function(res){

        //这里res是对象

        return res.data；

    }，function(err){

        //处理响应的错误信息
        console.log(err)

    })

    axios.get('http://host/port/path').then(function(data){
        //这里的data数据是经过上面的响应拦截器处理过的
        console.log(data)

    })