Javascript 如何最好地利用setInterval轮询API端点？

所以我有一个端点，我想多次调用它，直到得到我想要的响应，我想知道这种方法是否是处理它的有效方法

所以这个端点，让我们称它为

/ping

返回一个对象，其值如下

{ping:1}

现在我想再点击这个端点几次，或者直到

ping

的值从

1

变为

2

。这是我目前的做法，但有一点不适合我，我想得到第二双眼睛

import React from "react";
import axios from "axios";

function App() {
  const apiCall = async () => {
    try {
      const ping = await axios({
        url: "https://rest.ensembl.org/info/ping?content-type=application/json",
        method: "GET",
        headers: {
          accept: "Application/json",
          "Content-Type": "Application/json",
        },
      });
      return ping.data;
    } catch (error) {
      return error.response;
    }
  };

  const myIntervalFunc = () => {
    let myCall = async () => await apiCall();
    let retryNum = 0;
    myCall();
    let interval = setInterval(async () => {
      let intervalCall = await myCall();
      if (intervalCall.ping !== 2) {
        retryNum++;
        console.log("INTERVAL DATA ", intervalCall);
      }
      if (retryNum === 6) {
        clearInterval(interval);
      }
    }, 3000);
  };

  return <button onClick={() => myIntervalFunc()}>Make interval call</button>;
}

export default App;

从“React”导入React；
从“axios”导入axios；
函数App（）{
const apiCall=async（）=>{
试一试{
const ping=等待axios({
url:“https://rest.ensembl.org/info/ping?content-type=application/json“，
方法：“获取”，
标题：{
接受：“应用程序/json”，
“内容类型”：“应用程序/json”，
},
});
返回ping.data；
}捕获（错误）{
返回error.response；
}
};
常量myIntervalFunc=（）=>{
让myCall=async（）=>等待apiCall（）；
设retryNum=0；
myCall（）；
let interval=setInterval（异步（）=>{
让intervalCall=等待myCall（）；
if（intervalCall.ping！==2）{
retryNum++；
console.log（“间隔数据”，intervalCall）；
}
如果（retryNum==6）{
间隔时间；
}
}, 3000);
};
返回myIntervalFunc（）}>makeinterval调用；
}
导出默认应用程序；

---

正如您在上面看到的，当用户按下按钮时，会对我们的

/ping

端点进行API调用，我们会在清除间隔之前重试7次。有没有更有效的方法，或者这已经足够好了？非常感谢您的反馈。

如果您在等待ping响应后再重试，我建议将

setInterval

更改为

setTimeout

这是因为除非清除，否则

setInterval

将继续以间隔运行

这意味着，如果请求花费的时间比预期的长，它可能会在下一个间隔开始后收到响应

使用

setTimeout

将确保在再次检查之前收到响应

import React from "react";
import axios from "axios";

function App() {
  const apiCall = async () => {
    try {
      const ping = await axios({
        url: "https://rest.ensembl.org/info/ping?content-type=application/json",
        method: "GET",
        headers: {
          accept: "Application/json",
          "Content-Type": "Application/json",
        },
      });
      return ping.data;
    } catch (error) {
      return error.response;
    }
  };

  const myIntervalFunc = () => {
    let myCall = async () => await apiCall();
    let retryNum = 0;
    
    // do you need to call this here?
    // it doesn't seem like this would do anything
    myCall();

    // create interval as a named function
    const interval = async () => {
        let intervalCall = await myCall();
        
        // end loop if ping === 2
        if (intervalCall.ping === 2) {
          return;
        }

        retryNum++;
        console.log("INTERVAL DATA ", intervalCall);
        
        // you don't need to change the `===` to `>=`
        // I find this is a `safe` way to handle it
        // in case something else increments retryNum
        // beyond 6 
        if (retryNum >= 6) {
          return;
        }

        // run `interval` again
        setTimeout(interval, 3000);
    };
    
    // call interval
    interval();
  };

  return <button onClick={() => myIntervalFunc()}>Make interval call</button>;
}

export default App;

从“React”导入React；
从“axios”导入axios；
函数App（）{
const apiCall=async（）=>{
试一试{
const ping=等待axios({
url:“https://rest.ensembl.org/info/ping?content-type=application/json“，
方法：“获取”，
标题：{
接受：“应用程序/json”，
“内容类型”：“应用程序/json”，
},
});
返回ping.data；
}捕获（错误）{
返回error.response；
}
};
常量myIntervalFunc=（）=>{
让myCall=async（）=>等待apiCall（）；
设retryNum=0；
//你需要在这里打电话吗？
//这似乎没什么用
myCall（）；
//将interval创建为命名函数
const interval=async（）=>{
让intervalCall=等待myCall（）；
//如果ping==2，则结束循环
if（intervalCall.ping==2）{
返回；
}
retryNum++；
console.log（“间隔数据”，intervalCall）；
//您不需要将`=`更改为`>=`
//我发现这是一种“安全”的处理方式
//以防其他内容增加retryNum
//超过6
如果（retryNum>=6）{
返回；
}
//再次运行'interval'
设置超时（间隔3000）；
};
//通话间隔
间隔（）；
};
返回myIntervalFunc（）}>makeinterval调用；
}
导出默认应用程序；

这正是我需要的反馈，非常感谢。你说得对，setTimeout是最好的方法，而且对

myCall（）

没有任何作用。这正是我想要的，我现在知道setInterval和setTimeout之间的正确区别了，谢谢！