0

Estoy empezando con React Native y necesito consumir una API. El problema es que esta API utiliza el metodo POST para hacer todas las consultas que debería hacer con GET y no he logrado encontrar ejemplos de como consumirla. Antes consumí esta API con Android Studio y Xamarin.

Adjunto imágenes de la API consumida por postman

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Con el siguiente código estoy consumiendo la API:

function LoginApi(data) {
  const url = `${basePath}api/Usuario/MovilSesion`;
  const params = {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: data,
  };
  fetch(url, params)
    .then((resp) => {
      return resp;
    })
    .then((result) => {
      return result.message;
    })
    .catch((err) => {
      return err.message;
    });
}

Los datos que muestra la consola de data y params son los siguientes:

data:

Object {
  "Clave": "A",
  "SIM": "",
  "Usuario": "A",
}

params:

Object {
  "body": Object {
    "Clave": "A",
    "SIM": "",
    "Usuario": "A",
  },
  "headers": Object {
    "Content-Type": "application/json",
  },
  "method": "POST",
}

intenté también usando body: JSON.stringify(data) pero siempre recibo "undefined". ¿Alguien podría ayudarme con esto?

Me di cuenta que si llegan mis parámetros a la api y que esta me está retornando los valores, pero no logro rescatarlos.

1 respuesta 1

1

Veo dos cosas, primero veo que no tienes una valor message en el body de tu respuesta, ahora lo segundo en las promesas de javascript no puedes retornar dentro el valor que recibes en la respuesta, te dejo dos opciones que tienes para lograr la consulta a tu api, la primera es solo agregar .json() a tu primer then, el segundo es un ejemplo de como usar async/await para realizar el mismo proceso.

function LoginApi(data) {
  const url = 'https://jsonplaceholder.typicode.com/posts';
  fetch(url, {
     method: 'POST',
     body: JSON.stringify(data),
     headers: {
       "Content-type": "application/json; charset=UTF-8"
     }
  })
  .then(response => response.json())
  .then(json => console.log(json))
}

async function LoginApi2(data) {
  const url = 'https://jsonplaceholder.typicode.com/posts';
  const response = await fetch(url, {
     method: 'POST',
     body: JSON.stringify(data),
     headers: {
       "Content-type": "application/json; charset=UTF-8"
     }
  });
  const jsonResponse = await response.json();
  console.log(jsonResponse);
}

LoginApi2({
  title: 'foo',
  body: 'bar',
  userId: 1
});

En ambos casos no puedes sacar el valor de la función de esa forma lo que puedes hacer es utilizar hooks o solo setState para obtener el valor de esa consulta, o utilizar algo como Redux o Context paramantener el estado global de tu app, Saludos

2
  • Exacto, logré consumirla pero no puedo sacar el dato tal como dices por lo que estoy obligado a tener una función que me consuma la api en cada pantalla que lo necesite? no hay manera de que pueda dejar todas las funciones del servicio dentro de un .js a parte? el 1 jun. 2020 a las 13:52
  • Se le llama estado de la aplicación, busca un tutorial de Redux o revisa la documentación de React el apartado de Contexto, de esta forma al obtener los datos de la api se pueden manejar en diferentes vistas y componentes el 2 jun. 2020 a las 15:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.