每20秒钟致电API，然后停止特定响应

Question

从渲染组件的那一刻起，我想每20秒钟致电一次API，并且在提供特定响应时必须停止API调用。

解释更多。有一个API获取方法，它将像下面一样发送响应。 {firstWork：'Success'，二项工作：'成功'，第三项工作：'过程中'} ，

所以我想从组件渲染的点开始定期/反复（每20秒）调用此API（每20秒）直到所有这些变成“成功”。 {firstWork：'Success'，秒为：'成功'，第三项：'Success'}

当我得到上述响应时，我应该停止调用API GET方法。如何在ReactJ中实现它？

Answer 1

您可以通过在组件中设置setInterval来实现这一目标。

import { useEffect } from "react"

const Component = () => {
  useEffect(() => {
    const interval = setInterval(() => {
      fetch("/yourApiEndpoint")
        .then(res => res.json())
        .then(json => {
          if(json.thirdWork === "Success"){
            clearInterval(interval)
          }
        })
    }, 20*1000)
  },[])

  return <p>component</p>
}