Así que quiero hacer que mi función retrase la lectura de líneas antes de navegar a otra página. Actualmente tengo un microservicio ejecutándose en un bucle infinito que lee y escribe desde un archivo de texto. Dado que el proceso puede llevar un tiempo, me gustaría esperar al menos 5 segundos. Aquí está mi código:
import { Link } from 'react-router-dom'; import { useNavigate } from 'react-router-dom'; import React from "react"; import axios from "axios"; import raw from '../command_file.txt'; function HomePage() { let navigate = useNavigate(); let result; const [ingredientInput, setIngredientInput] = React.useState(); const handleSubmit = async (e) => { e.preventDefault(); const data = {ingredientInput}; console.log(data.ingredientInput); console.log(JSON.stringify(data)); const response = await fetch('http://localhost:5000/verify', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify(data), }); if (response.status === 201){ console.log("Connected to microservice!"); } else { console.log(`Error, status code = ${response.status}`) } console.log(JSON.stringify(response.json)); fetch(raw) .then(r => r.text()) .then(text => { console.log('text decoded:', text); console.log(text[7]); result = text[7]; navigate("/result", result); }); };Quiero pausar el programa antes de que se llame a buscar entre 5 y 10 segundos para que el resultado se pueda completar con una variable en la que el archivo pueda pasar el resultado más tarde usando navegar. Desafortunadamente, no he podido hacer funcionar nada como setTimeout. Como el programa se ejecuta ahora, el resultado se pasa como indefinido y el texto variable devuelve datos antiguos del archivo de texto. No tengo ideas, ¿alguien podría indicarme la dirección correcta en cuanto a lo que debo hacer?
No estoy muy seguro de si esto ayudaría en su caso, pero puede usar esta genial función manual js sleep:
const sleep = ms => new Promise(r => setTimeout(r, ms));
y luego, antes de la búsqueda, puedes llamarlo así:
await sleep(5000)
No estoy seguro de entender lo que está creando aquí, pero parece que está usando ese archivo .txt público como base de datos, lo que realmente no es una buena idea. Idealmente, desea que su microservicio escriba en la base de datos y devuelva lo que su código de interfaz necesita directamente.
En su caso, el flujo podría verse así:
Tu código se vería así:
fetch('http://localhost:5000/verify', { ...postHeaders }).then( res => res.json()).then(res => navigate(res["url"]))Editar: si realmente debe hacerlo de esta manera, vería la forma en que está importando el archivo txt. Debe asegurarse de que esté en un directorio público (p. ej., puede ser atendido por nginx) y que realmente lo obtiene de esa URL pública en lugar de importarlo en el momento de la compilación. Sin embargo, todavía no estoy seguro de por qué te obligan a hacerlo de esta manera, ya que realmente no tiene mucho sentido.