Estoy tratando de implementar promesas y async/await en mi proyecto. Necesito usar fetch para publicar algunos datos en el servidor y luego hacer otros procesos usando javascript. pero estoy confundido sobre cómo debo manejar el error para las promesas async/await anidadas.
el problema es que hay un error "No detectado (prometido) ¡parar!" y la cadena "parar!!" no se agrega en el div
esto es lo que probé:
function tunggu(waktu) { return new Promise((resolve) => { const action = setTimeout(() => { const str = `${waktu.toString()} milisecond has passed<br/>`; resolve(str); }, waktu); }) } const div = document.querySelector('#asd'); fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then(json => { console.log(json); (async () => { div.innerHTML = 'start<br/>'; const a = await tunggu(2000); div.innerHTML += a; throw('stop!!'); // it looks like this line is causing the error const b = await tunggu(3000); div.innerHTML += b; })(); }) .catch(error => { console.log('error occurred', error) div.innerHTML += error }) <div id="asd"></div> Esto (también en jsfiddle ) es solo una versión simplificada de mi código, en mi proyecto, la búsqueda usa el método POST, y los procesos js en realidad tienen muchos más procesos, así que lo throw porque el error puede ocurrir en cualquier lugar .
hubo un error "No detectado (en promesa) ¡parar!" y la cadena "parar!!" no se agrega al div
Rompió la cadena de promesas al introducir una función asíncrona independiente en el controlador .then() (que lanza, pero no tiene .catch() propio, lo que en última instancia provoca el error que ve).
En su lugar, haga que todo el controlador .then() asíncrono:
function tunggu(waktu) { return new Promise((resolve) => { setTimeout((() => resolve(`${waktu.toString()} milisecond has passed`)), waktu); }) } const div = document.querySelector('#asd'); fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then(async (json) => { console.log(json); div.innerHTML = 'start<br/>'; const a = await tunggu(2000); div.innerHTML += a + '<br/>'; throw('stop!!'); const b = await tunggu(3000); div.innerHTML += b; }) .catch(error => { console.log('error occurred', error) div.innerHTML += error }) <div id="asd"></div>Alternativamente, devuelva la promesa de su IIFE asíncrono, para mantener intacta la cadena de promesa:
function tunggu(waktu) { return new Promise((resolve) => { setTimeout((() => resolve(`${waktu.toString()} milisecond has passed`)), waktu); }) } const div = document.querySelector('#asd'); fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then(json => { console.log(json); return (async () => { div.innerHTML = 'start<br/>'; const a = await tunggu(2000); div.innerHTML += a + '<br/>'; throw('stop!!'); const b = await tunggu(3000); div.innerHTML += b; })(); }) .catch(error => { console.log('error occurred', error) div.innerHTML += error }) <div id="asd"></div>