Cómo Usar Axios y Angular

Nube Colectiva

hace 5 meses

En esta página:

Github

Para integrar la librería Axios con el framework Angular.

Debes seguir ciertos pasos para que todo salga bien.

En este tutorial te enseñaré a Cómo Usar Axios y Angular, vamos con ello.

Integración de Axios y Angular

Sigue los siguientes pasos para que todo salga bien:

Creación de proyecto

Para crear un nuevo proyecto en Angular, usaremos la Angular CLI.

Ejecutamos el siguiente comando para crear el proyecto:


ng new miapp --standalone=false

CREATE miapp/angular.json (2682 bytes)
CREATE miapp/package.json (1074 bytes)
CREATE miapp/README.md (1093 bytes)
CREATE miapp/tsconfig.json (892 bytes)
CREATE miapp/.editorconfig (290 bytes)
CREATE miapp/.gitignore (629 bytes)
CREATE miapp/tsconfig.app.json (277 bytes)
CREATE miapp/tsconfig.spec.json (287 bytes)
CREATE miapp/.vscode/extensions.json (134 bytes)
CREATE miapp/.vscode/launch.json (490 bytes)
CREATE miapp/.vscode/tasks.json (980 bytes)
CREATE miapp/src/main.ts (256 bytes)
CREATE miapp/src/index.html (304 bytes)
CREATE miapp/src/styles.css (81 bytes)
CREATE miapp/src/app/app.component.html (20239 bytes)
CREATE miapp/src/app/app.component.spec.ts (942 bytes)
CREATE miapp/src/app/app.component.ts (314 bytes)
CREATE miapp/src/app/app.component.css (0 bytes)
CREATE miapp/src/app/app.config.ts (318 bytes)
CREATE miapp/src/app/app.routes.ts (80 bytes)
CREATE miapp/public/favicon.ico (15086 bytes)
- Installing packages (npm)...
...
...
(Continua la creación del proyecto)
...
...
CREATE miapp/src/app/app.component.spec.ts (942 bytes)
CREATE miapp/src/app/app.component.ts (314 bytes)
CREATE miapp/src/app/app.component.css (0 bytes)
CREATE miapp/src/app/app.config.ts (318 bytes)
CREATE miapp/src/app/app.routes.ts (80 bytes)
CREATE miapp/public/favicon.ico (15086 bytes)
- Installing packages (npm)...
√ Packages installed successfully.
    Successfully initialized git.

ng new miapp --standalone=false

CREATE miapp/angular.json (2682 bytes)

CREATE miapp/package.json (1074 bytes)

CREATE miapp/README.md (1093 bytes)

CREATE miapp/tsconfig.json (892 bytes)

CREATE miapp/.editorconfig (290 bytes)

CREATE miapp/.gitignore (629 bytes)

CREATE miapp/tsconfig.app.json (277 bytes)

CREATE miapp/tsconfig.spec.json (287 bytes)

CREATE miapp/.vscode/extensions.json (134 bytes)

CREATE miapp/.vscode/launch.json (490 bytes)

CREATE miapp/.vscode/tasks.json (980 bytes)

CREATE miapp/src/main.ts (256 bytes)

CREATE miapp/src/index.html (304 bytes)

CREATE miapp/src/styles.css (81 bytes)

CREATE miapp/src/app/app.component.html (20239 bytes)

CREATE miapp/src/app/app.component.spec.ts (942 bytes)

CREATE miapp/src/app/app.component.ts (314 bytes)

CREATE miapp/src/app/app.component.css (0 bytes)

CREATE miapp/src/app/app.config.ts (318 bytes)

CREATE miapp/src/app/app.routes.ts (80 bytes)

CREATE miapp/public/favicon.ico (15086 bytes)

- Installing packages (npm)...

...

(Continua la creación del proyecto)

...

CREATE miapp/src/app/app.component.spec.ts (942 bytes)

CREATE miapp/src/app/app.component.ts (314 bytes)

CREATE miapp/src/app/app.component.css (0 bytes)

CREATE miapp/src/app/app.config.ts (318 bytes)

CREATE miapp/src/app/app.routes.ts (80 bytes)

CREATE miapp/public/favicon.ico (15086 bytes)

- Installing packages (npm)...

√ Packages installed successfully.

Successfully initialized git.

Al comando anterior le estoy pasando la opción –standalone con el booleano false. Esta opción me crea el proyecto con los archivos necesarios como el archivo app.module.ts y otros archivos más.

Instalación de Axios

Ingresamos al directorio del proyecto.

Instalamos la librería Axios ejecutando el siguiente comando:


# Ingresamos al directorio del proyecto
cd miapp

# Instalamos axios
npm install axios --save

# Ingresamos al directorio del proyecto

cd miapp

# Instalamos axios

npm install axios --save

Al comando para instalar axios le estoy pasando la opción o flag –save.

Esto lo hago para que axios se coloque en la sección dependencies del archivo package.json

Así mantenemos un orden.

Creación del servicio

Lo que haremos es consumir una API con axios mediante un endpoint o URL.

Ejecutamos el siguiente comando para crear el servicio para consumir la API con axios:


ng generate service leer-api

CREATE src/app/leer-api.service.spec.ts (379 bytes)
CREATE src/app/leer-api.service.ts (145 bytes)

ng generate service leer-api

CREATE src/app/leer-api.service.spec.ts (379 bytes)

CREATE src/app/leer-api.service.ts (145 bytes)

Abrimos el archivo leer-api.service.ts de nuestro servicio y agregamos lo siguiente (He colocado comentarios para explicar que hacen las líneas más importantes del código):


import { Injectable } from '@angular/core';

// Importamos Axios
import axios from 'axios';

@Injectable({
  providedIn: 'root'
})
export class LeerApiService {

  constructor() { }

  // Función para llamar al endpoint o URL de la API 
  llamarDatos() {
    
    return axios.get('http://localhost:8000/api/v1/postres')
    
  }

}

import { Injectable } from '@angular/core';

// Importamos Axios

import axios from 'axios';

@Injectable({

providedIn: 'root'

})

export class LeerApiService {

constructor() { }

// Función para llamar al endpoint o URL de la API

llamarDatos() {

return axios.get('http://localhost:8000/api/v1/postres')

}

Configuración del componente

Abrimos el archivo app.component.ts y agregamos lo siguiente (He colocado comentarios para explicar que hacen las líneas más importantes del código):


import { Component } from '@angular/core';

// Importamos nuestro servicio
import { LeerApiService } from './leer-api.service';

@Component({
  selector: 'app-root',
  template: `
  <!-- Presionamos un botón para obtener los datos de la API -->
    <button (click)="leerDatos()">Obtener Datos</button>
    <p>{{ nombre }}</p>
    <p>{{ precio }}</p>
    <p>{{ stock }}</p>
  `
})
export class AppComponent {

  // Función para pedir los datos llamando a nuestro servicio
  leerDatos() {
    this.leerApiService.llamarDatos()
    .then(response => {

      // Recibimos los datos
      this.datos = response.data;

      // Mostramos los datos obtenidos en la consola 
      console.log(this.datos);

      // Accedemos al 'nombre' del primer producto
      this.nombre = response.data[0].nombre;

      // Accedemos al 'precio' del primer producto
      this.precio = response.data[0].precio;

      // Accedemos al 'stock' del primer producto
      this.stock = response.data[0].stock;

    })
    .catch(function (error) {
  
      // Si hubo algun error mostramos algo 
      console.log(error);
  
    })
    .finally(function () {
  
      // Se ejecuto sin problemas 
      
    });
    
  }

  // Variables 
  title = 'miapp';
  datos: any;
  nombre: any;
  precio: any;
  stock: any;

  constructor(private leerApiService: LeerApiService) {}

}

import { Component } from '@angular/core';

// Importamos nuestro servicio

import { LeerApiService } from './leer-api.service';

@Component({

selector: 'app-root',

template: `

<button (click)="leerDatos()">Obtener Datos</button>

<p>{{ nombre }}</p>

<p>{{ precio }}</p>

<p>{{ stock }}</p>

})

export class AppComponent {

// Función para pedir los datos llamando a nuestro servicio

leerDatos() {

this.leerApiService.llamarDatos()

.then(response => {

// Recibimos los datos

this.datos = response.data;

// Mostramos los datos obtenidos en la consola

console.log(this.datos);

// Accedemos al 'nombre' del primer producto

this.nombre = response.data[0].nombre;

// Accedemos al 'precio' del primer producto

this.precio = response.data[0].precio;

// Accedemos al 'stock' del primer producto

this.stock = response.data[0].stock;

})

.catch(function (error) {

// Si hubo algun error mostramos algo

console.log(error);

})

.finally(function () {

// Se ejecuto sin problemas

});

}

// Variables

title = 'miapp';

datos: any;

nombre: any;

precio: any;

stock: any;

constructor(private leerApiService: LeerApiService) {}

}

Probando la integración de Axios y Angular

Ahora vamos a verificar si Axios y Angular están funcionando correctamente.

Arrancamos el servidor de Angular ejecuando el siguiente comando:


ng serve --open

Initial chunk files | Names         | Raw size
polyfills.js        | polyfills     | 90.23 kB |
main.js             | main          |  4.50 kB |
styles.css          | styles        | 95 bytes |

                    | Initial total | 94.82 kB

Application bundle generation complete. [1.407 seconds]

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.    
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help

ng serve --open

Initial chunk files | Names | Raw size

polyfills.js | polyfills | 90.23 kB |

main.js | main | 4.50 kB |

styles.css | styles | 95 bytes |

| Initial total | 94.82 kB

Application bundle generation complete. [1.407 seconds]

Watch mode enabled. Watching for file changes...

NOTE: Raw file sizes do not reflect development server per-request transformations.

➜ Local: http://localhost:4200/

➜ press h + enter to show help

Abrimos la ruta local http://localhost:4200/ en nuestro navegador.

Si presionamos el botón Obtener Datos, podemos ver que los datos se llaman sin problemas.

Los datos se muestran en la vista HTML y también en la consola del navegador:

Puedes leer las API que desees con Axios y Angular

Así de fácil puedes usar Axios y Angular.

Conoce el Esquema de Respuesta de Una Solicitud de Axios.

Conclusión

En este tutorial has aprendido a Cómo Usar Axios con Angular.

Te da las nociones esenciales para poder usar Axios con Angular de forma adecuada.

Recuerda que con la práctica constante serás un experto en Axios y Angular.

Nota(s)

No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.