axios取消请求与请求、响应拦截器结合使用

   <script type="text/javascript">
        const btn = document.getElementById('btn')
        const btn1 = document.getElementById('btn1')
        const { CancelToken, isCancel } = axios //CancelToken 能为一次请求 "打一个标识"
        let cancel
        // 请求拦截器场景
        axios.interceptors.request.use(function(config){
            if(cancel){
                cancel('取消了')
            }
            config.cancelToken = new CancelToken(function(c){
                cancel = c
            })
            return config
        })
        // 响应拦截器场景
        axios.interceptors.response.use(
            response =>{
                return response.data
            },
            error =>{
                if(isCancel(error)){
                    console.log('用户取消了请求 原因是', error.message);
                }else{
                    console.log('失败了',error);
                }
                return new Promise(()=>{})
            }

        )
        btn.onclick = async () => {
            const result = await axios.get('http://localhost:3000/status')//接口延时 3秒 返回数据 注意此接口不支持
            console.log(result);// 都是成功的数据 如果失败呢 场景需要 响应拦截器
        }
        // 触发取消
        btn1.onclick = () => {
            cancel()
        }
    </script>