axios的拦截器(请求拦截器、响应拦截器)和取消请求

飞熊 • 2023年9月9日下午11:26 • 技术随笔 • 阅读 224

axios请求拦截器 (一般一个回调)

是什么：在真正发请求之前执行的一个回调函数

作用：对所有的请求做统一的处理追加请求头、追加参数、界面loading提示等

axios响应拦截器

是什么：得到响应之后执行的一组回调函数

作用：若请求成功对成功的数据进行处理；若请求失败对失败进行统一的操作

注意：可以指定多个请求拦截器后指定的先执行

 <script type="text/javascript">
        const btn = document.getElementById('btn')
        //请求拦截器
        axios.interceptors.request.use(function (config) {
            //发请求之前做些什么 根据业务场景 有的需要添加请求头 
            // console.log(config); //获取到了所有的请求配置项
            if (Date.now() % 2 === 0) {
                config.headers.token = 'tokentokentoken'
            }
            return config
        })
        //响应拦截器
        axios.interceptors.response.use(
            response =>{
                console.log('响应拦截器成功的回调执行了',response);
                return response.data
            },
            // 作用： 如果 请求失败 统一放在响应拦截器这里处理 
            error =>{
                console.log('响应拦截器 失败的回调执行了');
                alert(error)
                return new Promise(()=>{ //停掉 并且返回promise 实例 后面的不执行
                })
            }
        )
        // btn.onclick = () => {

        //     axios.get('http://localhost:3000/status').then(
        //         response => { console.log('成功了', response) },
        //         error => { console.log('失败了'); }
        //     )
        // }
        btn.onclick = async() => {
           const result = await axios.get('http://localhost:3000/status') //本地服务接口
           console.log(result);  
        }
    </script>

取消请求： const { CancelToken } = axios //CancelToken 能为一次请求 “打一个标识”

 <script type="text/javascript">
        const btn = document.getElementById('btn')
        const btn1 = document.getElementById('btn1')
        const { CancelToken } = axios //CancelToken 能为一次请求 "打一个标识"
        let cancel
        btn.onclick = async () => {
            axios({
                url: 'http://localhost:3000/status/test1?delay=3000',//接口延时 3秒 返回数据 注意 此接口不支持
                cancelToken: new CancelToken(function (c) {
                    // console.log(c);// 参数是一个函数 调用此函数就可以关闭本次请求
                    // c()
                    cancel = c
                })
            }).then(
                response => {
                    console.log('成功了', response.data);
                },
                error => {
                    console.log('失败了', error);
                }
            )
        }
        btn1.onclick = () => {
            cancel()
        }
    </script>