0

Tengo problemas con las peticiones get y post en Angular 4. Soy nueva utilizando éste framework y es mi interés aprender a recuperar e insertar registros desde una API.

¿Alguien podría decirme cuál es el procedimiento para hacerlo?

Gracias.

  getUsuario(usuario, contrasena) {
    this.http.post('http://123.456.78.90:12345/api/IniciarSesion', {
      NombreUsuario: usuario,
      Password: contrasena
    })
    .subscribe(
      res => {
        console.log(res);
        if(res.Usuario === null)
          alert('Usuario o contraseña incorrectos');
        else if (res.Usuario.IdUsuario>0)
          alert('Usuario autenticado');
      },
      err => {
        console.log('Error occured');
      }
    );

Ese es el código que he intentado hasta ahora y me marca un error en 'Usuario'. Cabe mencionar que descargué un ejemplo de internet y técnicamente debería funcionar. Lo que no entiendo es el porqué del error. No sé si falte declarar algún servicio o no sé. Cabe mencionar que a la API a la que tiene acceso está hecha con C# y SQL Server.

6
  • coloca el codigo que has intentado hasta el momento para poder ayudarte. Commented el 12 ago. 2018 a las 23:35
  • Ya lo agregué. También paso el código que he intentado para el método get (el de arriba es post, aunque se llame get) y me marca un error en lo siguiente: this.http.get('123.456.78.90:12345/api/Usuarios/BusquedaUsuarios{IdCliente}/{IdFuerzaVenta}/{Distrito}/{Ruta}/{IdUsuario}/{NombreUsuario}', {params: Params}) .subscribe(data => { this.listaUsuarios = data.Data; this.ocultarListaUsuarios = false; //console.log(data); });
    – Yarizza
    Commented el 12 ago. 2018 a las 23:45
  • Me marca un error en: this.listaUsuarios=data.Data. ¿A qué crees que se deba?
    – Yarizza
    Commented el 12 ago. 2018 a las 23:46
  • @Yarizza indica el mensaje del error, ya que esto nos facilita en la ayuda.
    – lDanny7
    Commented el 13 ago. 2018 a las 7:02
  • Sólo me indica que 'Usuario' no existe en éste contexto. Lo mismo pasa con 'Data'. No sé si sea algún tipo de palabra reservada, porque ya estuve buscando en internet, sin éxito.
    – Yarizza
    Commented el 13 ago. 2018 a las 11:21

1 respuesta 1

0

A ver, creo que el error es por clases.

Que ocurre?

Cuando intenta utilizar esta comparación res.Usuario === null, tienes un objecto en el proyecto con esa propiedad? No funciona igual que Javscript normal, tienes que parsearlo a un objeto para poder acceder.

Backend

Tengo que suponer que la API te devuelve un objecto de C#, con mayúsculas por ejemplo, por lo que tienes que parsearlo a un objeto de Typescript, digamos que esta clase me devuelve un usuario y contraseña.

Un ejemplo de la clase en C#:

public class User {
      public string Username { get; set; }
      public string Password { get; set; }
   }

Ahora cuando vamos a hacer el post a la API tenemos que enviarle los parámetros para esas propiedades, ya que es lo que probablemente tengas programado que te pida, como por ejemplo:

public async Task<User> IniciarSesion([FromUri] User user) {
            /// ...... Aquí tu logica
        }

Frontend

Como habiamos dicho antes, tienes que parsear tu objeto de C# a uno de Typescript, asi que creamos una clase User:

export class User {
  name: string;
  password: string;

  constructor() {}

  static deserialize(item: any): User {
    const user = new User();

    user.name = item.Username;
    user.password = item.Password;

    return user;
  }
}

Ahora cuando haces la petición y te devuelve res, puedes hacer un deserialize ya que admite cualquier tipo de objeto y devuelve un objecto que conocemos(user).

 getUsuario(usuario, contrasena) {
         this.http.post('http://123.456.78.90:12345/api/IniciarSesion', {
                 Username: usuario,
                 Password: contrasena
             })
             .subscribe(
                 res => {
                     console.log(res);

                     const users = User.deserialize(res);
                     if (user == null) {
                         alert('Usuario o contraseña incorrectos');
                     } else {
                         alert('Error occured');
                     }
                 },
                 err => {
                     console.log('Error occured');
                 }
             );

Fíjate que también he cambiado el método this.http.post.

No te olvides de poner le import arriba!

import { User} from "../model/user";

Te recomiendo abrir otra pregunta y buscar mejores técnicas para utilizar una API, así como lo estas haciendo es bastante inseguro, deberías de utilizar hasing y dar tokens, pero si estas aprendiendo esta bien!

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.