取消 Axios 发布请求外部使用效果钩子

Question

GET请求在此示例中取消正常：

export default function Post (props) {
const _cancelToken = axios.CancelToken.source()
useEffect(() => {
const _loadAsyncData = async () => {
await axios.get('/post'), { cancelToken: _cancelToken.token })
}
_loadAsyncData()
return () => {
_cancelToken.cancel()
}
}, [])
return ()
}

但是当我需要通过 POST 请求保存表单时，我的代码如下所示：

export default function Form (props) {
const _cancelToken = axios.CancelToken.source()
const _zz = { qq: 'QQ' }
const handleCreate = async e => {
e.preventDefault()
_zz.qq = 'ZZ'
await axios.post('/form'), {}, { cancelToken: _cancelToken.token })
}
useEffect(() => {
return () => {
console.log(_zz.qq)
_cancelToken.cancel()
}
}, [])
return ()
}

请求不取消，我的_zz.qq总是'QQ'而不是'ZZ'。没有钩子就可以正常工作，但我喜欢钩子，想为新组件使用钩子。

我想在componentWillUnmount时取消请求。

Answer 1

这是因为您丢失了渲染之间的更改。 在handleCreate调用期间，变量仅针对该渲染更改。 在后续渲染/卸载中运行useEffect时，您将_zz重置为{ qq: 'QQ' }。 为了解决这个问题，你需要使用引用。

export default function Form (props) {
const cancelToken = useRef(null)
const zz = useRef({ qq: 'QQ' })
const handleCreate = async e => {
e.preventDefault()
cancelToken.current = axios.CancelToken.source() 
zz.current = { qq: 'ZZ' }
await axios.post('/form'), {}, { cancelToken: cancelToken.current.token })
}
useEffect(() => {
return () => {
console.log(zz.current) //this should now be {qq : 'ZZ'}
if (cancelToken.current) {
cancelToken.current.cancel()
}
}
}, [])
return null
}