Question

我正在尝试在搜索字段中的输入为空时取消请求，以便在删除输入后不显示结果。

我尝试不使用取消请求，并且它起作用了，唯一的问题是我删除字符的速度太快了，结果不会消失。声明了此外部组件：

#LabelOverride::get('person')#

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

这是状态：

const source = axios.CancelToken.source();

该功能在更改时触发

state = {
        results: null
    }

这是我触发功能的方式：

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})
        }

    }

然后我只显示结果：

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

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: [] });
}

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

1 个答案: