为什么此请求取消在 axios 中不起作用？

Question

当我的搜索字段中的输入为空时，我试图取消请求，因此在删除输入后结果不会显示。

我试着不使用取消请求并且它有效，唯一的问题是我删除字符太快结果不会消失。 声明了这个外部组件：

const source = axios.CancelToken.source();

还尝试在处理程序中声明它相同的结果。

这是 state：

state = {
        results: null
    }

function 触发变化

findGames = (event) => { //Cancel request when empty event.target.value missing
        let searchText = event.target.value;
        source.cancel('Request Canceled');
        if (event.target.value !== "") {
            let body = {
                "search_text": `${searchText}`, "fields": ["id", "name", "release_dates"]
            }

            axios.post(getGameIDUrl, body, headers,{cancelToken: source.token})
                .then(res => res.data.filter((result) => { return result.type === "game" }))
                .then(res => this.setState({ results: res }))
                .catch(err => {
                    if(axios.isCancel(err)) {
                        console.log('Request Canceled')
                    }
                })
        } else {
            this.setState({results: null})
        }

    }

这就是我触发 function 的方式：

<StyledInput type="text" onChange={this.findGames} />

然后我只显示结果：

{this.state.results}

Answer 1

原因axios.CancelToken.source(); 每次按键时都是唯一的。 因此，对于您的代码：您发送的请求将永远不会被取消，并且您尝试取消未发送的请求。

您必须保留axios.CancelToken.source(); 在通话之间，对我来说，无条件地取消您在上一次击键时发送的请求也是有意义的。

这不仅涵盖了空字符串的情况，而且当连续击键的响应以错误的顺序返回时，也使我们免于竞争条件。

// source is declared outside event handler to be preserved between calls
this.source.cancel('Request Canceled');
this.source = axios.CancelToken.source();
if (event.target.value) {
    let body = {
        "search_text": `${searchText}`, 
        "fields": ["id", "name", "release_dates"]
    }
    axios.post(getGameIDUrl, body, headers,{cancelToken: this.source.token})
        .then(res => res.data.filter((result) => { return result.type === "game" }))
        .then(res => this.setState({ results: res }))
        .catch(err => {
            if(axios.isCancel(err)) {
                console.log('Request Canceled')
            }
        }) 
} else {
  this.setState({ results: [] });
}

Answer 2

如果您的 responseType 是“stream”，则使用 CancelToken 或新的 AbortController 取消将不起作用。 您必须关闭 stream。

通过response.data.on中的console.log可以看到日志会停止，在调用response.data.destroy之后。

var options = {
      url: url,
      method: 'POST',
      data: {credentials: "something"},
      responseType: "stream"
}
const response = await axios(options)
setTimeout(() => {
    response.data.destroy()//--> this will close the stream and the download will stop
}, 3000);
response.data.on('data', (chunk) => {
    console.log("chunk length: ", chunk.length)
})

我所做的是在我的请求 function 之外创建一个变量，这样我就可以通过更改变量来停止请求。

var cancelDownload = false
function requestFun() {
    var options = {
        url: url,
        method: 'POST',
        data: { credentials: "something" },
        responseType: "stream"
    }
    const response = await axios(options)
    response.data.on('data', (chunk) => {
        console.log("chunk length: ", chunk.length)
        if (cancelDownload) {
            response.data.destroy()
            cancelDownload = false
        }
    })
}

PS：尽管这篇文章已经很老了，但我还是想给出我的解决方案。