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

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('取消请求')
    }
}