formData con angular para enviar datos

En Angular, a menudo necesitamos enviar información a nuestros servidores. Cuando se trata de enviar datos de formularios, especialmente si incluyen archivos, FormData es nuestro mejor aliado. Veamos cómo usarlo de forma sencilla.

¿FormData, Qué es? Imagínalo como un sobre…

Piensa en FormData como un sobre donde puedes meter diferentes «papelitos» con información (campos del formulario) y también archivos. Luego, envías este sobre a la API.

El «Sobre» FormData

Imagina FormData como un sobre digital donde pones los datos que necesitas enviar.

let formData = new FormData();
formData.append('grant_type', 'client_credentials');
formData.append('client_id', 'cliente_r4u_1k_afwMWN4MyQi.');
formData.append('client_secret', '4B1D3963A04E4E8270BAD09EE2CF');
formData.append('username', 'user@user.com');
formData.append('password', 'holasoylacontraseña');

Aquí, new FormData() crea un «sobre» vacío. Luego, usamos formData.append('nombre_del_campo', 'valor') para añadir cada dato importante:

'username' y 'password': Las credenciales del usuario para iniciar sesión.

'grant_type': Indica el tipo de autorización que estamos solicitando (en este caso, client_credentials, aunque también vemos username y password, lo que podría indicar otro tipo de flujo).

'client_id' y 'client_secret': Son identificadores únicos de nuestra aplicación, como una llave secreta para acceder a la API.

Enviando con HttpClient

Angular usa HttpClient para hablar con APIs. Para enviar nuestro FormData, lo pasamos en la petición POST:

TypeScript

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { take } from 'rxjs/operators';

interface Token { access_token: string; /* ... */ }

@Injectable({ providedIn: 'root' })
export class AuthService {
  constructor(private http: HttpClient) { }

  obtenerToken() {
    let formData = new FormData();
    formData.append('grant_type', 'client_credentials');
    formData.append('client_id', '...');
    formData.append('client_secret', '...');
    formData.append('username', '...');
    formData.append('password', '...');

    return this.http.post<Token>;(environment.middleware, formData).pipe(take(1));
  }
}

El truco está en pasar formData como segundo argumento de http.post. Angular se encarga del resto.

Recibiendo la Respuesta

Así manejamos la respuesta (token exitoso o error):

this.authService.obtenerToken().subscribe({
  next: (token) => {
    console.log('Token:', token.access_token);
    // Guardar token
  },
  error: (error) => {
    console.error('Error:', error);
    // Manejar error
  },
  complete: () => {
    // Acciones al finalizar
  }
});

¿Por qué FormData?

Aunque aquí no hay archivos, FormData es un estándar flexible para enviar datos de formulario. Algunas APIs lo prefieren, incluso para texto.

Extra

No hace mucho me pidieron que esta misma llamada pasará los datos como parámetros y para esto usaremos un map para facilitarnos las cosas

const formDataInfo: any = {
      grant_type: 'client_credentials',
      client_id: '9Z7z2r8r8c',
      client_secret: 'abcdef',
      username: 'sinecesitamosuser@user.com',
      password: 'PvuCurJCfLxvxb1MqapCW'

    }
    let str = Object.keys(Hdata).map(function (key) {
      return key + '=' + Hdata[key];
    }).join('&');