在useEffect hook外取消axios post请求答案

【问题标题】：Cancel Axios post request outside useEffect hook在useEffect hook外取消axios post请求
【发布时间】：2019-12-19 03:43:33
【问题描述】：

在本例中，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时取消请求。

【问题讨论】：

如果将_cancelToken.cancel 放入依赖数组useEffect(....., [_cancelToken.cancel]) 会怎样？
似乎如预期的那样，您卸载组件并因此等待 axios.post 被取消，并且您的 _zz.qq = 'ZZ' 似乎没有这样运行。
Teneff，它在请求初始化后立即取消（但它有效），我认为它是正确的。我需要在组件卸载时取消，而不是在令牌更改时取消。
Rikin，我不确定我是否理解你。 _zz.qq 在 useEffect 之外没有改变。卸载组件时需要取消请求。

标签： reactjs axios react-hooks use-effect

【解决方案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
}

【讨论】：