axios入门(5)—— 拦截器介绍
小白浏览:5572020-12-16 16:12:02本文累计收益:0我也要赚钱
一、简介

拦截器的意思是在请求之前或响应被处理前拦截他们,比如在请求后台接口前可以增加“加载提示”效果。拦截器包括请求拦截器和响应拦截器。

代码如下:

<script>
    import axios from 'axios'
    export default{
        name:'拦截器',
        created(){
            //1、请求拦截器
            axios.interceptors.Request.use(config=>{
                //发起请求前执行代码
                return config;
            },err=>{
                //请求错误执行代码
                return Promise.reject(err);
            });
            //2、响应拦截器
            axios.interceptors.Response.use(res=>{
                //请求成功并返回响应数据执行代码
                return res;
            },err=>{
                //请求错误执行代码
                return Promise.reject(err);
            });
            //3、取消拦截器
            let interceptors = axios.interceptors.required.use(
            config=>{
                config.headers={
                    auth:true
                }
                return config;
            })
            axios.interceptors.Request.eject(interceptors)
        }
    }
</script>
二、实例代码

 后台开发中,每次调用接口都需要身份验证,可以给接口传入token,下面代码每次通过instance实例调用接口都会提交token到后台接口。

<script>
    import axios from 'axios'
    export default{
        name:'拦截器',
        created(){
            let instance = axios.create({});
            instance.interceptors.Request.use(
                config=>{
                    config.headers.token = 'token'
                }
                return config;
            );
            //使用instance调用接口之前都会传入token值
            instance.get('接口地址').then(res=>{
                //成功执行代码
            })
        }
    }
</script>

 

评论列表
发表评论
+ 关注