Estoy luchando con un problema (probablemente bastante simple) de HTML y JavaScript. Y como no soy mucho de frontend, espero que haya alguien por aquí que pueda ayudarme.
Tarea : un amigo con un sitio web, que se ha creado en Wordpress usando el tema Thrive, me pidió que escribiera un código JavaScript que llama a una API cada vez que se presiona un botón específico. Thrive permite inyectar código personalizado en el pie de página, así que creé una función para llamar a la API y configurarla como onclick en la etiqueta <a> del botón.
Código simplificado:
async function dummy() { var myHeaders = new Headers(); myHeaders.append("Content-Type", "text/plain"); var requestOptions = { method: "POST", headers: myHeaders, body: JSON.stringify({}), redirect: "follow", }; return fetch("some.api.com", requestOptions); } document.getElementById("button1").onclick = async function () { var res = await dummy(); return res.ok; }; Problema : si bien esto funciona sin problemas en Chrome, Safari y los navegadores móviles tienen problemas. Safari produce la mayor parte del tiempo la siguiente excepción: Unhandled Promise Rejection: TypeError: Load failed . Jugué un poco con los await y en algún momento pude hacerlo funcionar de vez en cuando, pero nunca de manera constante.
Por favor, ¿podría decirme lo que estoy supervisando?
PD: Soy consciente de que esto de ninguna manera es seguro y definitivamente no está listo para la producción. Esto está destinado a ser utilizado únicamente con fines de demostración, por lo tanto, la forma rápida y sucia.
function dummy() { return new Promise((resolve, reject) => { var myHeaders = new Headers(); myHeaders.append("Content-Type", "application/json"); var requestOptions = { method: "GET", headers: myHeaders, body: JSON.stringify({}), }; fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then(data => { resolve(data); }) .catch((error) => { reject(error); }); }) } const main = async()=>{ console.log(await dummy()); console.log("foo bar") } main();