Problema con una llamada "doble embrague" en React Native

Question

Estoy teniendo problemas usando llamadas  permitidas  Fetch dentro de una función nativa React. Parece que el primer Fetch funciona correctamente, sin embargo un error se lanza en el segundo. Aquí está el código: //****CALL TWO FETCH REQUESTS... const data = { passkey: '12345', callup: 'name' }; const secondary = { passkey: '12345', callup: 'name' }; fetch('https://myremoteserveraddress', { method: 'POST', headers: { 'Content- Type': 'application/json', }, body: JSON.stringify(data), }) .then(function(response) { if (response.ok) { return response.json(); } else { return Promise.reject(response); } }) .then(data => { // Store the post data to a variable _post = data; console.log('Success on FIRST FETCH:', data); console.log('answer is:', data.answer); console.log('answer is:', _post.answer); // Fetch another API fetch('https://myremoteserveraddress', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(secondary), }) }) .then(function (response) { if (response.ok) { return response.json(); } else { return Promise.reject(response); } }) .then(function (userData) { console.log('Returned from BOTH fetch calls'); //does not write to console console.log(_post, userData); //does not write to console this.vb.start(); }) .catch((error) => { console.error('Error in onPressPublishBtn:', error); }); //**** Parece que la segunda llamada de Fetch vuelve  indefinida , a pesar de ser idéntica a la primera llamada de Fetch que parece funcionar con éxito. El error devuelto es  TypeError: indefinido no es un objeto (evaluando 'response.ok') . Si alguien puede aconsejar sobre cuál es el problema, sería muy apreciable. Gracias por adelantado.

logicluminary · Accepted Answer

Deberías devolver una promesa del segundo entonces(...) bloque para que la respuesta sea pasada a la tercera entonces(...) bloque. Quizás quieras probar algo así:

// Fetch another API
return fetch('https://myremoteserveraddress', {
 method: 'POST',
 headers: {
   'Content-Type': 'application/json'
 },
 body: JSON.stringify(secondary),
})

Respondida el Dec 17, 2020 a las 16:26 - por logicluminary

Gpt · Answer

El error que estás experimentando se debe a que la segunda llamada Fetch no está manejando correctamente la respuesta y eso está causando que ocurra un error. La razón de este problema es que estás intentando acceder a response.ok fuera del scope adecuado.

Para solucionar este problema, te sugiero que muevas la segunda parte del código dentro del segundo then de la primera llamada Fetch, para que la segunda llamada Fetch se realice después de recibir la respuesta de la primera llamada.

Aquí tienes un ejemplo de cómo podrías reestructurar tu código:

javascript
const data = { passkey: '12345', callup: 'name' };
const secondary = { passkey: '12345', callup: 'name' };

fetch('https://myremoteserveraddress', {
  method: 'POST', 
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then(function(response) {
  if (response.ok) {
    return response.json();
  } else {
    return Promise.reject(response);
  }
})
.then(data => {
  _post = data;
  console.log('Success on FIRST FETCH:', data);
  console.log('answer is:', data.answer);
  console.log('answer is:', _post.answer);

  // Fetch another API inside the first fetch's then block
  return fetch('https://myremoteserveraddress', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(secondary),
  });
})
.then(function(response) {
  if (response.ok) {
    return response.json();
  } else {
    return Promise.reject(response);
  }
})
.then(function(userData) {
  console.log('Returned from BOTH fetch calls');
  console.log(_post, userData);
  this.vb.start();
})
.catch((error) => {
  console.error('Error in onPressPublishBtn:', error);
});

Al realizar este cambio, la segunda llamada Fetch se ejecutará solo después de que la primera llamada haya tenido éxito, evitando el error de "indefinido" que estás experimentando. Espero que esta solución te sea útil. ¡Déjame saber si necesitas más ayuda!

Respondida el Dec 18, 2020 a las 16:26 - por Gpt

Gemini · Answer

El problema con tu código es que estás usando el método .then en la segunda llamada fetch dentro del primer bloque .then. Esto crea una anidación innecesaria de promesas y dificulta el manejo de errores.

Para resolver esto, puedes usar la sintaxis async/await para hacer que tu código sea más lineal y fácil de leer. Aquí está el código actualizado:


//NoneCALL TWO FETCH REQUESTS...
const data = { passkey: '12345', callup: 'name' };
const secondary = { passkey: '12345', callup: 'name' };

const firstFetch = await fetch('https://myremoteserveraddress', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
});

if (firstFetch.ok) {
  const firstData = await firstFetch.json();

  console.log('Success on FIRST FETCH:', firstData);
  console.log('answer is:', firstData.answer);

  const secondFetch = await fetch('https://myremoteserveraddress', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(secondary),
  });

  if (secondFetch.ok) {
    const secondData = await secondFetch.json();

    console.log('Returned from BOTH fetch calls');
    console.log(firstData, secondData);
    this.vb.start();
  } else {
    console.error('Error in second fetch:', secondFetch);
  }
} else {
  console.error('Error in first fetch:', firstFetch);
}

Cambios:

Se eliminó la anidación de promesas. Se utilizó async/await para hacer que el código sea lineal.

Se manejaron los errores en cada llamada `fetch`.

Ahora, tu código debería hacer las dos llamadas fetch correctamente y manejar cualquier error que pueda ocurrir.

Respondida el Dec 18, 2020 a las 16:28 - por Gemini

Problema con una llamada "doble embrague" en React Native

3 Respuestas: