"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > axios

axios

Publicado el 2024-08-06
Navegar:416

Axios

Lea el código lentamente y siga el flujo y el formato de la información según sea necesario, a medida que cambia

Descripción general

Axios es una biblioteca de JavaScript popular que se utiliza para realizar solicitudes HTTP tanto desde el navegador como desde Node.js. Es un proyecto de código abierto diseñado para simplificar el proceso de envío de solicitudes HTTP asincrónicas a puntos finales REST y realizar operaciones CRUD (Crear, Leer, Actualizar, Eliminar).

Creador

Axios fue creado por Matt Zabriskie. El proyecto es mantenido por la comunidad y está disponible en GitHub.

Beneficiarios

Axios es beneficioso para:

  • Desarrolladores front-end: Para realizar solicitudes HTTP desde aplicaciones web.
  • Desarrolladores back-end: Para integrar solicitudes HTTP dentro de aplicaciones Node.js.
  • Desarrolladores full-stack: Para manejar solicitudes HTTP tanto en el lado del cliente como en el del servidor.

Ventajas

  1. Basado en promesas: facilita el trabajo con solicitudes y respuestas asincrónicas.
  2. Interceptores: Permite modificar solicitudes o respuestas antes de que sean manejadas.
  3. Transformación automática de datos JSON: Simplifica el manejo de datos JSON.
  4. Protección CSRF: ayuda con la protección contra falsificación de solicitudes entre sitios.
  5. Transformación de solicitudes y respuestas: Transformación personalizada de solicitudes y respuestas.
  6. Manejo de errores: Manejo de errores simplificado en comparación con otros métodos.
  7. Compatibilidad amplia con navegadores: funciona en todos los navegadores modernos y en Node.js.

Uso

Donde se usa

  • Aplicaciones web: Para comunicarse con servicios back-end.
  • Aplicaciones Node.js: Para realizar solicitudes HTTP a otras API o servicios.
  • Aplicaciones móviles: Como parte de marcos como React Native.

Donde falla

  1. Aplicaciones pesadas: Puede que no sea la mejor opción para transferencias de datos muy grandes debido al consumo de memoria.
  2. Limitaciones del navegador: Sujeto a restricciones de políticas del mismo origen a menos que CORS se maneje correctamente.
  3. Tamaño de dependencia: Dependencia adicional que administrar, lo que podría ser una preocupación para proyectos minimalistas.

Por qué se usa

  • Facilidad de uso: API simple para realizar solicitudes HTTP.
  • Flexibilidad: Fácilmente configurable y extensible.
  • Soporte comunitario: amplia adopción y amplio apoyo comunitario.

Por qué no se usaría

  • Tamaño de biblioteca: Gastos generales de agregar otra dependencia.
  • Alternativas: Preferencia por Fetch API u otras bibliotecas como request o superagent.

Cómo se usa

Instalación

npm install axios

Uso básico

const axios = require('axios');

// Performing a GET request
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

Uso detallado con comentarios

const axios = require('axios');

// Create an instance of axios with default settings
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: { 'X-Custom-Header': 'foobar' }
});

// Interceptor to log request details
instance.interceptors.request.use(request => {
  console.log('Starting Request', request);
  return request;
});

// Interceptor to log response details
instance.interceptors.response.use(response => {
  console.log('Response:', response);
  return response;
});

// Making a POST request
instance.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
  .then(response => {
    console.log('User created:', response.data);
  })
  .catch(error => {
    console.error('Error creating user:', error);
  });

Ejemplos de mal uso

  1. Ignorar el manejo de errores: No manejar correctamente los errores puede provocar fallas en la aplicación.
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  });
// Error handling should not be omitted
  1. Código de bloqueo con solicitudes sincrónicas: Axios no admite solicitudes sincrónicas, usarlo de una manera que espere un comportamiento sincrónico es incorrecto.

Métodos

Métodos de instancia

  • axios(config)
  • axios(url[, configuración])

Métodos de solicitud

  • axios.request(config)
  • axios.get(url[, configuración])
  • axios.delete(url[, configuración])
  • axios.head(url[, configuración])
  • axios.opciones(url[, configuración])
  • axios.post(url[, datos[, configuración]])
  • axios.put(url[, datos[, configuración]])
  • axios.patch(url[, datos[, configuración]])

Métodos de conveniencia

  • axios.all(iterable)
  • axios.spread(devolución de llamada)

Creando instancias

  • axios.create([config])

Interceptores

  • axios.interceptores.request.use(onFulfilled[, onRejected[, opciones]])
  • axios.interceptores.response.use(onFulfilled[, onRejected[, opciones]])

Valores predeterminados de configuración

  • axios.valores predeterminados

Cancelar

  • axios.Cancelar
  • axios.CancelToken
  • axios.isCancel

Conclusión

Axios es una biblioteca sólida y fácil de usar para realizar solicitudes HTTP en aplicaciones JavaScript. Proporciona una API potente con funciones como interceptación de solicitudes y respuestas, transformación JSON automática y arquitectura basada en promesas. Sin embargo, es esencial comprender sus limitaciones y utilizarlo adecuadamente para evitar posibles peligros.

Declaración de liberación Este artículo se reproduce en: https://dev.to/l_thomas_7c618d0460a87887/axios-ndn?1 Si hay alguna infracción, comuníquese con [email protected] para eliminarla.
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3