每 20 秒調用一次 API 並在特定響應時停止

Question

我想從渲染組件的那一刻起每 20 秒調用一次我的 API，並且當它提供特定響應時，api 調用必須停止。

解釋更多。 有一個 API get 方法將發送如下響應。 {firstWork：“成功”，SecondWork：“成功”，ThirdWork：“進行中”}

所以我想從渲染組件的那一點開始定期/重復地（每 20 秒）調用這個 API，直到所有這些都變成“成功”。 {firstWork：“成功”，SecondWork：“成功”，ThirdWork：“成功”}

當我得到上述響應時，我應該停止調用 API get 方法。 如何在 ReactJS 中實現它？

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