axios 基于拦截器的取消（重复）请求

红太狼 2022-10-15 05:45 283阅读 0赞

# axios 基于拦截器的取消（重复）请求 #

// 添加请求拦截器
    axios.interceptors.request.use((config) => {
        
        // 准备发请求之前, 取消未完成的请求
        if (typeof cancel === 'function') {
        
            // 取消请求（message 参数是可选的）
            cancel('取消请求')
        }
        // 添加一个 cancelToken 配置
        config.cancelToken = new axios.CancelToken(function executor(c) {
        
            // executor 函数接收一个 cancel 函数作为参数
            // 保存取消函数, 用于之后可能需要取消当前请求
            cancel = c
        })
        return config
    })
    // 添加响应拦截器
    axios.interceptors.response.use(
        response => {
        
            cancel = null
            return response
        },
        error => {
        
            if (axios.isCancel(error)) {
         // 取消请求的错误
                console.log('请求取消的错误', error.message) // 做出相应的处理
                // 中断 promise 链接
                return new Promise(() => {
        })
            } else {
         // 请求出错了
                cancel = null
                // 将错误向下传递
                // throw error
                return Promise.reject(error)
            }
        }
    )
    
    let cancel // 用于保存取消请求的函数
    function getApp1 () {
        
        axios({
        
            url: 'http://localhost:3000/app1',
        }).then(
            response => {
        
                console.log('app1 成功请求', response.data)
            },
            error => {
        
                console.log(error.message)
            }
        )
    }
    
    function getApp2 () {
        
        axios({
        
            url: 'http://localhost:3000/app2',
        }).then(
            response => {
        
                console.log('app2 成功请求', response.data)
            },
            error => {
        
                console.log(error.message)
            }
        )
    }
    
    function cancelRequest () {
        
        if (typeof cancel === 'function') {
        
            // 取消请求（message 参数是可选的）
            cancel('取消请求')
        }
    }