Axios Cancel(取消)

Axios Cancel(取消)

AbortController

从v0.22.0开始，Axios支持AbortController以Fetch接口的方式取消请求：

const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal			// signal 暗示；信号
}).then();
// 取消请求
controller.abort()

CancelToken 👎deprecated（弃用）

您也可以使用CancelToken取消请求。

AXIOS取消令牌API基于已撤回的Cancellable Promises proposal.

此API自v0.22.0起已弃用，不应在新项目中使用

您可以使用CancelToken 创建一个取消令牌。源工厂如下所示:

<button class="btn btn-primary">GET</button>
<button class="btn btn-danger">取消请求</button>
<script>
    btn = document.querySelectorAll("button")
    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();
    
    btn[0].onclick = function () {
        axios.get('http://localhost:3000/posts/', {
            cancelToken: source.token
        }).then(
            res => console.log(res)
        ).catch(
            function (thrown) {
                if (axios.isCancel(thrown)) {
                    console.log('Request canceled', thrown.message);
                } else {
                    console.log("###", thrown)
                }
            })
    }

    
    btn[1].onclick = () => {
        source.cancel('操作已被用户取消。');        // 一次性， 取消请求(Message参数是可选的)
    } 
</script>

你也可以通过向CancelToken 构造函数传递一个执行器函数来创建一个取消令牌:

<button class="btn btn-primary">GET</button>
<button class="btn btn-danger">取消请求</button>
<script>
    btn = document.querySelectorAll("button")
    let cancel = null
    
    btn[0].onclick = function () {
        if (cancel === null) {
            axios({
                baseURL: "http://localhost:3000",
                method: "GET",
                url: '/posts/',
                cancelToken: new axios.CancelToken(cancelFn => { cancel = cancelFn })
            }).then(
                res => { console.log(res); cancel = null }
            ).catch(
                err => {
                    if (axios.isCancel(err)) {
                        console.log(err); cancel = null
                    }
                }
            )
        }
    }
    btn[1].onclick = () => cancel()
</script>

注意：您可以使用相同的取消令牌/中止控制器取消多个请求。如果取消令牌在启动Axios请求时已经被取消，则该请求将立即被取消，而不会尝试进行任何真正的请求。

在过渡期内，您可以同时使用两个取消接口，即使是同一个请求：