javascript - react - fetch response

usando un fetch dentro de otro fetch en javascript

Question

Quiero conseguir una api y después de eso llamar a otra. ¿Está usando sabiamente un código como este en javascript?

fetch(url, {
 method: ''get'',
 }).then(function(response) {  
  response.json().then(function(data) {  
    fetch(anotherUrl).then(function(response) {
      return response.json();
    }).catch(function() {
      console.log("Booo");
    });
  });  
}) 
.catch(function(error) {  
  console.log(''Request failed'', error)  
});

Answer 1

Esta es una pregunta común a la que la gente se sorprende al comenzar con Promises, y yo mismo cuando comencé. Sin embargo, primero ...

Es genial que estés intentando usar la nueva API de Fetch , pero si fuera tú, usaría una implementación XMLHttpRequest por ahora, como jQuery AJAX o la implementación anulada de BackQone de jQuery''s .ajax() , si ya estás usando estas bibliotecas. La razón es porque la API Fetch es todavía muy nueva y, por lo tanto, experimental en esta etapa.

Dicho esto, la gente definitivamente lo usa, pero no lo haré en mi propio código de producción hasta que esté fuera del estado "experimental".

Si decide continuar utilizando fetch , hay un polyfill disponible. NOTA: tiene que saltar a través de aros adicionales para que el manejo de errores funcione correctamente y para recibir cookies del servidor. Si ya estás cargando jQuery, o estás usando Backbone, solo quédate con esos por ahora; No es del todo terrible, de todos modos.

Ahora en el código:

Quieres una estructura plana , de lo contrario te estás perdiendo el punto de Promesas. No es aconsejable anidar promesas, necesariamente, porque las Promesas resuelven lo que no pudieron las devoluciones de llamadas asíncronas anidadas (infierno de devolución de llamada).

Usted se ahorrará tiempo y energía, y producirá menos código con errores simplemente utilizando una estructura de código más legible. No es todo, pero es parte del juego, por así decirlo.

Las promesas consisten en hacer que el código asíncrono conserve la mayoría de las propiedades perdidas del código síncrono, como la sangría plana y un canal de excepción.

- Petka Antonov (Bluebird Promise Library)

// run async #1
asyncGetFn()
// first ''then'' - execute more async code as an arg, or just accept results
// and do some other ops
.then(response => {
    // ...operate on response data...or pass data onto next promise, if needed
})
// run async #2
.then(asyncGetAnotherFn)
.then(response => {
    // ...operate on response data...or pass data onto next promise, if needed
})
// flat promise chain, followed by ''catch''
// this is sexy error handling for every ''then'' above
.catch(err => {  
  console.error(''Request failed'', err) 
  // ...raise exeption...
  // ... or, retry promise... 
})

Answer 2

Fetch devuelve una promesa, y puede encadenar varias promesas , y usar el resultado de la primera solicitud en la segunda solicitud:

El ejemplo utiliza la API de SpaceX para obtener la información del último lanzamiento, encontrar la identificación del cohete y obtener la información del cohete.

var url = ''https://api.spacexdata.com/v2/launches/latest'';

var result = fetch(url, {
    method: ''get'',
  }).then(function(response) {
    return response.json(); // pass the data as promise to next then block
  }).then(function(data) {
    var rocketId = data.rocket.rocket_id;

    console.log(rocketId, ''/n'');
  
    return fetch(''https://api.spacexdata.com/v2/rockets/'' + rocketId); // make a 2nd request and return a promise
  })
  .then(function(response) {
    return response.json();
  })
  .catch(function(error) {
    console.log(''Request failed'', error)
  })

// I''m using the result variable to show that you can continue to extend the chain from the returned promise
result.then(function(r) {
  console.log(r); // 2nd request result
});

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

No hay un problema con el anidado de llamadas fetch() . Depende de lo que intenta lograr al anidar las llamadas.

Alternativamente, puede usar .then() para encadenar las llamadas. Ver también Cómo estructurar promesas anidadas.

fetch(url)
.then(function(response) { 
  return response.json()
})
.then(function(data) {   
  // do stuff with `data`, call second `fetch`
  return fetch(data.anotherUrl)
})
.then(function(response) { 
  return response.json(); 
})
.then(function(data) {
  // do stuff with `data`
})
.catch(function(error) { 
  console.log(''Requestfailed'', error) 
});