0

Servicio

import { HttpClient } from '@angular/common/http';

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class HerokuService {

  private REST_API_SERVER = " secret";
  private SIGNUP = "/signup";


  constructor(private http: HttpClient) {}

  public register(user){
    // return this.http.post(this.REST_API_SERVER, user, this.httpOptions).pipe(
      this.http.post<any>(this.REST_API_SERVER+this.SIGNUP, user).subscribe({
        next: data => {
          console.log('data');
          console.log(data);
          return data;
        },
        error: error => {
            console.log('error');
            console.log(error);
            return error;
          }
    })
}
}

Register component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HerokuService } from "../heroku.service";


@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {

  title = 'Registro';
  user= {
    name:'aaaa',
    email:'[email protected]',
    password:'aaa',
    repeat_password:'aaa'
  };
  submited = false;

  constructor(
    private herokuService:HerokuService
  ) { }

  ngOnInit(): void {

  }


  register(){
    this.submited = true;
    if (this.user.password === this.user.repeat_password) {
        let result = this.herokuService.register(this.user);

        console.log('result child compo');
        console.log(result);

    }
    else{
      alert('Error: Las contraseñas no coinciden !');
    }
    this.submited = false;
  }

}

Lo que pasa es que quiero manejar el resultado de la peticion http desde el componente hijo, en este caso en el register.component.

Aqui uso el servicio : let result = this.herokuService.register(this.user);, pero quiero controlar de alguna manera el response que recibo, pero el result del servicio desde el hijo es undefined por tanto no se como mostrar una cosa u otra para el usuario. ¿Como podria tener el result del service en el hijo y ya manejarlo a mi gusto?

2 respuestas 2

0

El resultado de llamar al servicio es undefined por que no estás retornando ningun valor en esa función. el return que haces dentro del Observable no es el return de la funcion register del servicio es el return de la funcion anonima que pasa como parámetro de la suscripción del Observable para que funcione debes retornar una promesa o un observable , por ejemplo:

public register(user) {

return new Promise((resolve, reject) => {
    this.http
        .post<any>(this.REST_API_SERVER + this.SIGNUP, user)
        .subscribe({
            next: data => {
                resolve(data)
            },
            error: error => {
                reject(error)
            }
        })
})

}

y en el component.ts obtendrías el resultado con:

let result = await this.herokuService.register(this.user);

O También puedes retornar directamente el Observable del llamado http y suscribirte desde el component:

function register(user) {
return this.http.post<any>(this.REST_API_SERVER + this.SIGNUP, user);

}

y en el component.ts

this.herokuService.register(this.user).subscribe({
next: data => {
    resolve(data)
},
error: error => {
    reject(error)
}

})

0

La llamada a this.herokuService.register(this.user); es asyncrona esto quiere decir que la respuesta no la optendras linealmente.

this.herokuService.register(this.user).subscribe(result => {
  // La variable result creala globalmente
  this.result = result;
  console.log(result);
});

Si lo quieres hacer linealmente necesitarias convertir la funcion register() en async y utilizar un await en la llamda del Api.

async register () {
   let result = await this.herokuService.register(this.user).pipe(map(res => res));
}

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.