Estoy tratando de tener 3 llamadas de búsqueda en mi función.

El primero:

Este me consigue una broma al azar

 fetch('https://v2.jokeapi.dev/joke/Programming') .then((res) => res.json()) .then((actualResponse) => (joke = actualResponse.joke));

Segundo:

Tengo que solicitar una broma de un bot, pensar en ello como un tipo de diseño de chatbot. Le pido "oye, dame un chiste" y luego me da uno. Este recibirá el "oye, dame una broma", envíalo al back-end y reaccionar lo renderizará más adelante.

 fetch('http://localhost:3002/jarvis/add', { method: 'POST', headers: { Accept: 'application/json, text/plain, */*', 'Content-Type': 'application/json', }, body: JSON.stringify({ text: messageInput.current.value, author: 1, }), }).then((res) => res.json());

El tercero:

Este es similar al segundo, se supone que le da a la clave de broma el valor de la variable de broma, lo envía al back-end y luego reacciona y lo renderiza más adelante.

 fetch('http://localhost:3002/jarvis/add', { method: 'POST', headers: { Accept: 'application/json, text/plain, */*', 'Content-Type': 'application/json', }, body: JSON.stringify({ joke: joke, }), }).then((res) => res.json());

Mi reacción puede renderizar cosas como esta, por lo que enviarlo al backend y renderizar funciona. Tengo una API meteorológica que funciona así, por ejemplo. Sin embargo, no entiendo por qué este no funciona, parece que tal vez se deba a que ejecuta otras funciones antes de terminar. Honestamente, no lo sé y agradecería los comentarios de alguien con más experiencia.

Me di cuenta de que podría necesitar usar async/await, ¿alguien puede señalar por qué lo siguiente no funciona? En mi opinión, hace la primera función, luego la segunda y finalmente la tercera. Tiene sentido para mí, claramente todavía no está bien. Este es el código completo ahora:

 async function getJoke() { let joke = 'Im a robot'; await fetch('https://v2.jokeapi.dev/joke/Programming') .then((res) => res.json()) .then((actualResponse) => (joke = actualResponse.joke)); await fetch('http://localhost:3002/jarvis/add', { method: 'POST', headers: { Accept: 'application/json, text/plain, */*', 'Content-Type': 'application/json', }, body: JSON.stringify({ text: messageInput.current.value, author: 1, }), }).then((res) => res.json()); await fetch('http://localhost:3002/jarvis/add', { method: 'POST', headers: { Accept: 'application/json, text/plain, */*', 'Content-Type': 'application/json', }, body: JSON.stringify({ joke: joke, }), }).then((res) => res.json()); }