Question

所以基本上我使用 axios 向后端发出请求，我想限制请求的数量。我正在使用 axios cancelToken，但由于某种原因它不起作用。这是我的代码

export const useDataQuery = (query, offset) => {
const token = useSelector(state => state.auth.access)
useEffect(() => {
    let cancel;
    axios({
        method: 'GET',
        url: 'http://localhost:8000/api/data/',
        params: { search: query, offset: offset },
        headers: { Authorization: `JWT ${token}` },
        cancelToken: new axios.CancelToken(c => cancel = c)
    }).then(res => {
        console.log(res.data)
    })

    return () => {
        console.log('cancel it');
        console.log(cancel());
        cancel();
    }
}, [query, offset, token])

} 我不知道这里出了什么问题。当我控制台记录取消功能时，它会打印未定义。我已经检查了其他解决方案，但没有奏效。所以我的问题是这里有什么问题？谢谢！

Answer 1

您需要存储 axios.CancelToken.source() 返回的对象，它有两个属性：cancel 方法和取消 token。

示例：

useEffect(() => {
    const cancelTokenSource = axios.CancelToken.source()
    axios({
        method: 'GET',
        url: 'http://localhost:8000/api/data/',
        params: { search: query, offset: offset },
        headers: { Authorization: `JWT ${token}` },
        cancelToken: cancelTokenSource.token
    }).then(res => {
        console.log(res.data)
    })

    return () => {
        console.log('cancel it');
        cancelTokenSource.cancel();
    }
}, [query, offset, token])

Axios 取消令牌不起作用。我该如何解决？

1 个答案: