Estoy estudiando con React Native, pero no puedo obtener una respuesta adecuada, mi código de recuperación es:

try {
     let response = fetch(
      "http://192.168.1.106/little_api/index.php",
      {
        method: "POST",
        headers: {
         "Accept": "application/json",
         "Content-Type": "application/json"
        },
       body: JSON.stringify(data)
     }
    );


     console.log(response);

La respuesta es:

enter image description here

La respuesta de la API que obtengo de la API cuando intento cartero:

enter image description here

Mi php api es: ingrese la descripción de la imagen aquí

Pero mi respuesta de la consola del depurador es ingrese la descripción de la imagen aquí

1
Mustafa UYSAL 27 abr. 2020 a las 23:43

3 respuestas

La mejor respuesta

Puedes enviarlo usando formdata:

let formData = new FormData();
formData.append('firstname', 'test');

Si hace esto, no tiene que usar JSON.stringify:

fetch(
  "http://192.168.1.106/little_api/index.php",
  {
    method: "POST",
    headers: {
     "Accept": "application/json",
     "Content-Type": "application/json"
    },
   body: data
 }
 ...
1
hkucuk 28 abr. 2020 a las 07:49

La función fetch() devuelve una promesa, por lo que debe resolver esta promesa utilizando uno de estos 2 métodos:

1 / Usando .then()

fetch(
      "http://192.168.1.106/little_api/index.php",
      {
        method: "POST",
        headers: {
         "Accept": "application/json",
         "Content-Type": "application/json"
        },
       body: JSON.stringify(data)
     }
   ).then(response => {
      console.log(response); //<- your response here
   }).catch(error => {
      console.log(error); //<-catch error
 });

2 / Utilizando la sintaxis async/await: debe agregar una palabra clave asíncrona en la función donde llama a fetch

async getResponse(){
try {
   let response = fetch(
      "http://192.168.1.106/little_api/index.php",
      {
        method: "POST",
        headers: {
         "Accept": "application/json",
         "Content-Type": "application/json"
        },
       body: JSON.stringify(data)
     }
    );
   console.log(response); //<- your response here
  } catch(e){
  console.log(e);<-catch error
  }
}
2
Mahdi N 27 abr. 2020 a las 20:55

fetch es un método asincrónico, lo que significa que necesita una devolución de llamada .then. Los datos que inmediatamente provienen de esto tienen un método json() adjunto para recuperar los datos reales en un formato legible.

  fetch("http://192.168.1.106/little_api/index.php", {
    method: "POST",
    headers: {
      "Accept": "application/json",
      "Content-Type": "application/json"
    },
    body: JSON.stringify(data)
 }).then(response => response.json())
   .then(data => {
     console.log(data) // this should return your data
   })
   .catch(err => console.log(err))

Como dijo Mahdi N en su respuesta, puede usar la sintaxis async/await para recuperar los datos sin necesidad de las devoluciones de llamada anidadas.

0
Tom Oakley 27 abr. 2020 a las 21:10