Estoy aprendiendo desarrollo web, así que tal vez la pregunta ya esté hecha pero no la he encontrado. Intenté registrar response.json() dentro del método .then antes de devolver la promesa de response.json() a la segunda función del controlador .then . El problema al que me enfrento es que, aunque se registra el resultado de response.json() , el código del siguiente método .then no se ejecuta. Aquí está mi código:
const fetchPromise = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json'); console.log(fetchPromise) fetchPromise .then( response => { console.log(response.json()) return response.json(); }) .then( json => { console.log(json[0].name); }); Se supone que el código registra el resultado de response.json() y luego termina con el registro de "baked beans" en el segundo controlador .then , pero solo registra el objeto de promesa y no sucede nada después. Este código, sin embargo, parece funcionar:
const fetchPromise = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json'); console.log(fetchPromise) fetchPromise .then( response => { var resp=response.json() // save the value first console.log(resp) return resp }) .then( json => { console.log(json[0].name); });Entonces, ¿por qué almacenar el resultado en una variable funciona, pero llamarlo directamente no?
En la consola, verá este error:
Uncaught (in promise) TypeError: Failed to execute 'json' on 'Response': body stream already read Eso es porque no puedes ejecutar response.json() dos veces . Simplemente mueva console.log hasta el último .then y registre json en lugar de res.json :
fetchPromise .then( response => { console.log(response.json()) // remove this line return response.json() }) .then( json => { console.log(json); // add this line console.log(json[0].name); });