取消请求（一：点击取消按钮，发送请求取消；二：点击发送请求，连续点击发送相同的请求或者点击发送请求未完成又去点击另一个请求，前一个请求自动取消；三：取消请求中如何使用拦截器）

不念不忘少年蓝@ 2023-06-17 14:53 22阅读 0赞

###  点击取消按钮，发送请求取消： ###

### 点击发送请求，连续点击发送相同的请求或者点击发送请求未完成又去点击另一个请求，前一个请求自动取消： ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>取消请求</title>
    </head>
    
    <body>
        <button onclick="getProducts1()">获取商品列表1</button><br>
        <button onclick="getProducts2()">获取商品列表2</button><br>
        <button onclick="cancelReq()">取消请求</button><br>
    </body>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
    <script>
        let cancel //用于保存取消请求的函数
    
        function getProducts1() {
            //在准备发请求前，取消未完成的请求
            if (typeof cancel === 'function') {
                cancel('取消请求')
            }
    
            axios({
                url: 'http://localhost:4000/products1',
                cancelToken: new axios.CancelToken((c) => { //c是用于取消当前请求的函数
                    //保存取消函数，用于之后可能需要取消当前请求
                    cancel = c
                })
            }).then(
                response => {
                    cancel = null
                    console.log('请求1成功了', response.data)
                },
                error => {
                    if (axios.isCancel(error)) {
                        console.log('请求1取消的错误', error.message)
                    } else {//请求出错了
                        cancel = null
                        console.log('请求1失败了', error.message)
                    }
    
                }
            )
    
        }
    
        function getProducts2() {
            if (typeof cancel === 'function') {
                cancel('取消请求')
            }
            axios({
                url: 'http://localhost:4000/products2',
                cancelToken: new axios.CancelToken((c) => { //c是用于取消当前请求的函数
                    //保存取消函数，用于之后可能需要取消当前请求
                    cancel = c
                })
            }).then(
                response => {
                    cancel = null
                    console.log('请求2成功了', response.data)
                },
                error => {
                    if (axios.isCancel(error)) {
                        console.log('请求2取消的错误', error.message)
                    } else {//请求出错了
                        cancel = null
                        console.log('请求2失败了', error.message)
                    }
                }
            )
        }
    
        function cancelReq() {
            if (typeof cancel === 'function') {
                //执行取消请求的函数
                cancel('强制取消请求')
            } else {
                console.log('没有可取消的请求')
            }
    
        }
    </script>
    
    </html>

### 取消请求中如何使用拦截器： ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>取消请求</title>
    </head>
    
    <body>
        <button onclick="getProducts1()">获取商品列表1</button><br>
        <button onclick="getProducts2()">获取商品列表2</button><br>
        <button onclick="cancelReq()">取消请求</button><br>
    </body>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
    <script>
        //添加请求拦截器
        axios.interceptors.request.use((config) => {
            //在准备发请求前，取消未完成的请求
            if (typeof cancel === 'function') {
                cancel('取消请求')
            }
            //添加一个cancelToken的配置
            config.cancelToken = new axios.CancelToken((c) => { //c是用于取消当前请求的函数
                //保存取消函数，用于之后可能需要取消当前请求
                cancel = c
            })
            return config
        },
            error => {
                return Promise.reject(error)
            }
        )
    
        //添加响应拦截器
        axios.interceptors.response.use(
            response => {
                cancel = null
                return response
            },
            error => {
                if (axios.isCancel(error)) {// 取消请求的错误
                    console.log('请求1取消的错误', error.message)// 做相应处理
                    //中断promise连接
                    return new Promise(() => { })
                } else {//请求出错了
                    cancel = null
                    //将错误向下传递
                    //throw error
                    return Promise.reject(error)
                }
            }
        )
    
        let cancel //用于保存取消请求的函数
        function getProducts1() {
            axios({
                url: 'http://localhost:4000/products1',
            }).then(
                response => {
                    console.log('请求1成功了', response.data)
                },
                error => {
                    console.log('请求1失败了', error.message)
    
                }
            )
    
        }
    
        function getProducts2() {
            axios({
                url: 'http://localhost:4000/products2',
            }).then(
                response => {
                    console.log('请求2成功了', response.data)
                },
                error => {
                    console.log('请求1失败了', error.message)
                }
            )
        }
    
        function cancelReq() {
            if (typeof cancel === 'function') {
                //执行取消请求的函数
                cancel('强制取消请求')
            } else {
                console.log('没有可取消的请求')
            }
    
        }
    </script>
    
    </html>