0

Estoy haciendo mis primeros pasos en Lambda AWS, y estoy conectando un proyecto de ionic/Angular con mi lambda en AWS, pero por algún motivo no recibo la respuesta del "Body" que se supone debe de regresar mi lambda.

exports.handler = async (event) => {
    let nombre = event.name;
    let apellido = event.LastName
    const response = {
        statusCode: 200,
                headers: {//Tengo este headers por el CORS
            "Access-Control-Allow-Headers" : "Content-Type",
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "OPTIONS,POST,GET"
        },
        body: JSON.stringify("Hello " + nombre + " " + apellido),
    };
    return response;
};

El output que obtengo:

Response
{
  "statusCode": 200,
  "headers": {
    "Access-Control-Allow-Headers": "Content-Type",
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "OPTIONS,POST,GET"
  },
  "body": "\"Hello Bitcoin Etherium\""
}

El output que necesito:

Hello Bitcoin Etherium

Ya le he dado "Deploy" y he usado la herramienta interna para testear valores con el json

{
  "name": "Bitcoin",
  "LastName": "Etherium"
}

Y me funciona correctamente en la prueba dentro de AWS. Y en mi codigo tengo lo siguiente:

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from "@angular/core";

@Injectable()
 export class RestProvider{

   constructor(public http:HttpClient){
     console.log('Probando desde AWS Lambda')
    }
    ObtenerRespuesta;
    async EscribirAPI(name,LastName){
        const httpOptions = {
          headers: new HttpHeaders({
            'Content-Type':  'application/json'
            })
          };
          debugger
          let postData = {name,LastName}
          let Api_URL = "<Mi link de la API>";       
          this.http.post(Api_URL, postData,httpOptions).subscribe(data => {
          this.ObtenerRespuesta = data["body"];//Y es aquí donde no recibo el body, al imprimir
//en consola me sale "Undefine"

        }, error => {
                console.log(error);
    });
  }
 }

Es llamado desde la clase principal de la siguente forma:

import { Component, OnInit } from '@angular/core';
import { RestProvider } from '../tab1/tab1lambda';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})

export class Tab1Page implements OnInit{
  
  Nombre = "";
  constructor(public lambdaAWS: RestProvider) { }

  ngOnInit(){}

  async LambdaAPI(nombre, apellido){
   await this.lambdaAWS.EscribirAPI(nombre, apellido);
   this.Nombre =  this.lambdaAWS.ObtenerRespuesta;
   
  }
}
7
  • ¿Obtienes algún error o simplemente obtienes undefined? Si obtienes algún error sería bueno indicar cuál es el error. En caso de no obtenerlo, ¿podrías indicar cuál es el contenido de data? Commented el 12 jul. 2021 a las 6:28
  • @ricardo-dlc solo el undefine
    – Alfa Rojo
    Commented el 12 jul. 2021 a las 13:28
  • 1
    en vez de acceder a data["body"] pon un console.log(data) para ver que contiene data
    – hawks
    Commented el 12 jul. 2021 a las 13:52
  • Como ya te había mencionado y el compañero @hawks reitera, ¿podrías colocar el contenido de data que obtienes en tu front? Revisando la documentación de ejemplo dicho mensaje debería estar en el primer nivel del objeto recibido y de ser así parece que el retorno de tu lambda (body) debería ser otro objeto. Commented el 12 jul. 2021 a las 15:58
  • @hawks he echo eso y ciertamente me sale "Undefine". Descubrí que al ejecutarlo 2veces funciona, pero eventualmente no es nada correcto hacer 2clicks para que algo funcione
    – Alfa Rojo
    Commented el 12 jul. 2021 a las 18:05

1 respuesta 1

1

La manera de llamar a la API no es correcta. Estas mezclando conceptos de promesas y observables.

Las promesas y observables son abstracciones que nos permiten ejecutar operaciones asíncronas.

Ambos tienen sus casos de uso y sus diferencias.

Por defecto, angular usa los RxJs observables para hacer las llamadas HTTP. Esto se puede cambiar, como lo verás abajo llamando el método toPromise sobre un observable.

Con promesas

EscribirAPI(name,LastName) {
  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/json'
      })
    };
    debugger
    let postData = {name,LastName}
    let Api_URL = "<Mi link de la API>";
    return this.http.post(Api_URL, postData,httpOptions).toPromise();
}

// En tu componente
async LambdaAPI(nombre, apellido){
   const respuestaAPI = await this.lambdaAWS.EscribirAPI(nombre, apellido);
   console.log(respuestaAPI);
   this.Nombre =  this.lambdaAWS.ObtenerRespuesta;
}

Con observables

EscribirAPI(name,LastName) {
  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/json'
      })
    };
    debugger
    let postData = {name,LastName}
    let Api_URL = "<Mi link de la API>";
    // Esto devolverá un observable
    return this.http.post(Api_URL, postData,httpOptions);
}

// En tu componente
LambdaAPI(nombre, apellido){
   const respuestaAPI = this.lambdaAWS.EscribirAPI(nombre, apellido).subscribe(
      respuestaAPI => {
        console.log(respuestaAPI);  
        this.Nombre = respuestaAPI;
      },
      error => console.error(error)
  );
}

Te recomiendo leer sobre Observables y promesas.

2
  • Y hay diferencias de rendimiento?? La verdad solo había leido de promesas, echaré un ojo a observables, muchas gracias!
    – Alfa Rojo
    Commented el 12 jul. 2021 a las 21:30
  • es mejor observables(en mi opinión), porque así podrás sacar máximo rendimiento al framework y las funcionalidades que te brinda. Pero para empezar no está mal usar promesas. Problemas de rendimiento no deberías tener.
    – hawks
    Commented el 12 jul. 2021 a las 21:33

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.