MENU

使用axios取消请求 - 原生JavaScript

July 25, 2020 • Read: 144 • 生活

有时候数据有限,过多的请求也只是返回空,那不如直接中断请求呢!
然后由于vue官方和axios梦幻联动,总是搜到关于vue的,所以再此之外的挺少,我就不客气地再发一次了

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    console.log('加载中')
    document.getElementById('loding').style.display = "block";
    if (!frag) {
        config.cancelToken =  new CancelToken(function executor(c)
        {
            cancel = c;
        })
        cancel('没有数据了');
    }
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    //console.log(response)
    if (response.data.message.length === 0){
        frag = false;
    }
    document.getElementById('loding').style.display = "none";
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

这里通过最后一次响应无数据,激活frag,再到下次的请求拦截器中,直接取消拦截。

QQ截图20200725140442.png

当数据刷完后,就会这样提示

(´இ皿இ`)如果还有更多的方法,欢迎分享啊

Archives QR Code Tip
QR Code for this page
Tipping QR Code