从服务器获取数据随机停止获取

Question

I have something very strange happening in my program. I have consol.logged the crap out of it with timestamps to try and figure out what is happening. Basically my program randomly stops fetching data. I have ensured a new stream of data is there but I have to refresh the entire page or resave the program to restart everything when it gets hung up. On top of that, there are no errors or flags telling me why it stops. I tried to isolate the issue but it is something to do with the async function most likely. Here is the code....

function App() {

  const data = async() => {
    try {
        console.log('try block initiated')
        const apiResponse = await fetch(ipAddress)
        console.log(apiResponse);
        console.log("BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB")
        const responseText = await apiResponse.text();
        console.log(responseText)
        console.log("CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC")
        if (loading === true){
            setLoading(false);
        }
        console.log("DDDDDDDDDDDDDDDDDDDDDDDDDDDDDD")
        return responseText;
    } catch (error) {
        console.log('catch initiated')
        setError(true);
    }
  };
  console.log("AAAAAAAAAAAAAAAAAAAAAAA")
  try{
      console.log("EEEEEEEEEEEEEEEEEEEEEEEEEEE")
    data().then(response=>setMoisture(response));
    console.log("FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF")
  } catch(error){
    console.log('gotcha')
    setError(true);
}
  
  let value = moisture;
  console.log(value);
  count += 1;  
  console.log(count);


  return(
    <div className="App">
      <WeatherCard moisture={value}/>    
    </div>
  );
}

Here is what the console looks like right before it stop fetching new data...

Answer 1

HERE IS A POSSIBLE SOLUTION. After many headaches and researching async functions. I think this is going to work. I am going to let this run all night and see if it ever gets caught up but so far, Here is the solution...

const data = async() => {
try {
    const apiResponse = await fetch(ipAddress)
    const responseText = await apiResponse.text();
    console.log("CCCCCCCCCCCCCCCCCCC");
    console.log(responseText);
    if (loading === true){
        setLoading(false);
    }
    data().then(response=>setMoisture(response));
    return responseText;
} catch (error) {
    console.log("EEEEERRRRRRRRRROOOOOOOOOOORRRRRRRRRRRR")
    setError(true);
    }   
};
console.log("AAAAAAAAAAAAAAAAAAAA");
if (moisture === "initialState"){
    data().then(response=>setMoisture(response));
}else{
    console.log("QQQQQQQQQQQQQQQQQQQQQQQQ")
}

Here is what I changed... I made an initial state called "initialSate and if the variable was this value, it runs the async function. I then NEVER CALL THIS ASYNC AGAIN OUTSIDE OF THE ASYNS ITSELF. Instead I call itself right before returning a value from the function. This works because my program is running while the async function is running. However, the program is sequential to itself and the async is sequential to itself. They are NOT sequential together. So, the async function now only gets called again once the async function finishes its first run. Simultaneaously the rest of my program is running. Before I think it was getting caught because my program was trying to call the async function before it had finished the first time. This is a pure guess because I have no way to proving that but it makes sense. If this overnight run fails. I will pull this from the solution. Otherwise, I think this will work. FINGERS CROSSED!