前端Axios-Day45

拦截器：axios.interceptors.request/response.use

    // 设置请求拦截器
        axios.interceptors.request.use(config => {
            console.log('请求拦截器 成功');
            config.params = { a: 100 }
            return config
        }, error => {
            console.log('请求拦截器 失败');
            return Promise.reject(error);
        });

        axios.interceptors.response.use(response => {
            console.log('响应拦截器 成功');
            return response;
        }, error => {
            console.log('响应拦截器 失败');
            return Promise.reject(error);
        });

        axios({
            method: 'GET',
            url: 'http://localhost:3000/posts'
        }).then(response => console.log(response)).catch(reason => console.log(reason))    

请求拦截器后进先执行，响应拦截器先进先执行。

可以通过对config进行修改达到传输请求前的修改参数功能。

 

axios取消请求：cancelToken属性：new axios.CancelToken(function executor(c))

 // 2.声明全局变量
        let cancel = null

        btn_send.onclick = function () {
            // 检测上一次请求是否完毕
            if (cancel !== null) {
                // 取消上一次的请求 重新开始请求
                cancel()
            }
            axios({
                method: 'GET',
                url: 'http://localhost:3000/posts',
                cancelToken: new axios.CancelToken(function executor(c) {
                    cancel = c
                })
            }).then(response => {
                console.log(response)
                // 执行成功后给cancel初始化
                cancel = null
            })
        }

        btn_cancel.onclick = function () {
            cancel()
        }