Manténgase SECO usando axios para solicitudes de API

1. Instalación y conceptos básicos
2. Configuración global
3. Instancia personalizada
4. interceptores

Las solicitudes HTTP son una parte crucial de cualquier aplicación web que se comunique con un servidor back-end. El front-end necesita algunos datos, por lo que los solicita a través de una solicitud HTTP de red (o Ajax, como suele llamarse), y el servidor devuelve una respuesta. Casi todos los sitios web hoy en día hacen esto de alguna manera.

Con un sitio más grande, podemos esperar ver más de esto. Más datos, más API y más circunstancias especiales. A medida que los sitios crecen así, es importante mantenerse organizado. Un concepto clásico es DRY (abreviatura de Don't Repite Yourself), que es el proceso de abstraer código para evitar que se repita una y otra vez. Esto es ideal porque a menudo nos permite escribir algo una vez, usarlo en varios lugares y actualizarlo en un solo lugar en lugar de en cada instancia.

También podríamos recurrir a las bibliotecas para que nos ayuden. Para Ajax, axios es una opción popular. Es posible que ya esté familiarizado con él e incluso lo utilice para cosas como solicitudes POST y GET independientes durante el desarrollo.

Instalación y conceptos básicos

Se puede instalar usando npm (o hilo):

npm install axios

Una solicitud POST independiente que utiliza Axios tiene este aspecto:

axios.post('https://axios-app.firebaseio.com/users.json', formData) .then(res = console.log(res)) .catch(error = console.log(error))

JavaScript nativo también tiene múltiples formas de hacer JavaScript. En particular, fetch(). Entonces, ¿por qué utilizar una biblioteca? Bueno, por un lado, el manejo de errores en la recuperación es bastante complicado. Lo pasarás mejor con axios desde el principio con eso. Si desea ver una comparación, tenemos un artículo que cubre ambos y un artículo que habla sobre el valor de la abstracción con cosas como esta.

¿Otra razón para optar por axios? Nos brinda más oportunidades para la DRYness, así que analizamos eso.

Configuración global

Podemos establecer una configuración global (por ejemplo, en nuestro main.jsarchivo) que maneje todas las solicitudes de la aplicación utilizando una configuración estándar que se establece a través de un objeto predeterminado que se envía con axios.

Este objeto contiene:

• baseURL:Una URL relativa que actúa como prefijo para todas las solicitudes, y cada solicitud puede agregar la URL
• headers: encabezados personalizados que se pueden configurar según las solicitudes
• timeout:El punto en el que se cancela la solicitud, normalmente se mide en milisegundos. El valor predeterminado es 0, lo que significa que no es aplicable.
• withCredentials: Indica si las solicitudes de control de acceso entre sitios deben realizarse mediante credenciales. El valor predeterminado es false.
• responseType: Indica el tipo de datos que devolverá el servidor, con opciones que incluyen json(predeterminado), arraybuffer, document, texty stream.
• responseEncoding: Indica la codificación que se utilizará para decodificar las respuestas. El valor predeterminado es utf8.
• xsrfCookieName: El nombre de la cookie que se utilizará como valor para el token XSRF; el valor predeterminado es XSRF-TOKEN.
• xsrfHeaderName: el nombre del encabezado HTTP que lleva el valor del token XSRF. El valor predeterminado es X-XSRF-TOKEN.
• maxContentLength: Defina el tamaño máximo del contenido de la respuesta HTTP en bytes permitidos.
• maxBodyLength: Define el tamaño máximo del contenido de la solicitud HTTP en bytes permitidos

La mayoría de las veces, solo usarás baseURL, headery tal vez timeout. El resto de ellos se necesitan con menos frecuencia ya que tienen valores predeterminados inteligentes, pero es bueno saber que los hay en caso de que necesiten corregir solicitudes.

Esta es la SECO en acción. Para cada solicitud, no tenemos que repetir el contenido baseURLde nuestra API ni repetir encabezados importantes que podríamos necesitar en cada solicitud.

A continuación se muestra un ejemplo en el que nuestra API tiene una base, pero también tiene varios puntos finales diferentes. Primero, configuramos algunos valores predeterminados:

// main.jsimport axios from 'axios';
axios.defaults.baseURL = 'https://axios-app.firebaseio.com' // the prefix of the URLaxios.defaults.headers.get['Accept'] = 'application/json' // default header for all get requestaxios.defaults.headers.post['Accept'] = 'application/json' // default header for all POST request
Then, in a component, we can use axios more succinctly, not needing to set those headers, but still having an opportunity to customize the final URL endpoint:
// form.js componentimport axios from 'axios';
export default { methods : { onSubmit () { // The URL is now https://axios-app.firebaseio.com/users.json axios.post('/users.json', formData) .then(res = console.log(res)) .catch(error = console.log(error)) } }}

Nota: Este ejemplo está en Vue, pero el concepto se extiende a cualquier situación de JavaScript.

Instancia personalizada

Configurar una “instancia personalizada” es similar a una configuración global, pero tiene como alcance componentes específicos. Entonces, sigue siendo una técnica SECO, pero con jerarquía.

Configuraremos nuestra instancia personalizada en un archivo nuevo (llamémoslo authAxios.js) y lo importaremos a los componentes de “preocupación”. Viajes y turismo

// authAxios.jsimport axios from 'axios'
const customInstance = axios.create ({ baseURL : 'https://axios-app.firebaseio.com'})customInstance.defaults.headers.post['Accept'] = 'application/json'
// Or like this...const customInstance = axios.create ({ baseURL : 'https://axios-app.firebaseio.com', headers: {'Accept': 'application/json'}})

Y luego importamos este archivo a los componentes del formulario:

// form.js component
// import from our custom instanceimport axios from './authAxios'
export default { methods : { onSubmit () { axios.post('/users.json', formData) .then(res = console.log(res)) .catch(error = console.log(error)) } }}

interceptores

Los interceptores ayudan en los casos en los que la configuración global o la instancia personalizada pueden ser demasiado genéricas, en el sentido de que si configura un encabezado dentro de sus objetos, se aplica al encabezado de cada solicitud dentro de los componentes afectados. Los interceptores tienen la capacidad de cambiar las propiedades de cualquier objeto sobre la marcha. Por ejemplo, podemos enviar un encabezado diferente (incluso si hemos configurado uno en el objeto) según cualquier condición que elijamos dentro del interceptor.

Los interceptores pueden estar en el main.jsarchivo o en un archivo de instancia personalizado. Las solicitudes se interceptan una vez enviadas y nos permiten cambiar la forma en que se maneja la respuesta.

// Add a request interceptoraxios.interceptors.request.use(function (config) { // Do something before request is sent, like we're inserting a timeout for only requests with a particular baseURL if (config.baseURL === 'https://axios-app.firebaseio.com/users.json') { config.timeout = 4000 } else { return config } console.log (config) return config; }, function (error) { // Do something with request error return Promise.reject(error);}); // Add a response interceptoraxios.interceptors.response.use(function (response) { // Do something with response data like console.log, change header, or as we did here just added a conditional behaviour, to change the route or pop up an alert box, based on the reponse status if (response.status === 200 || response.status 201) { router.replace('homepage') } else { alert('Unusual behaviour') } console.log(response) return response;}, function (error) { // Do something with response error return Promise.reject(error);});

Los interceptores, como su nombre lo indica, interceptan tanto solicitudes como respuestas para actuar de manera diferente según las condiciones que se proporcionan. Por ejemplo, en el interceptor de solicitudes anterior, insertamos un tiempo de espera condicional solo si las solicitudes tienen un archivo baseURL. Para la respuesta, podemos interceptarla y modificar lo que recibimos, como cambiar la ruta o tener un cuadro de alerta, dependiendo del código de estado. Incluso podemos proporcionar múltiples condiciones basadas en diferentes códigos de error.

Los interceptores resultarán útiles a medida que su proyecto crezca y comience a tener muchas rutas y rutas anidadas, todas comunicándose con los servidores en función de diferentes activadores. Más allá de las condiciones que establecí anteriormente, hay muchas otras situaciones que pueden justificar el uso de interceptores, según su proyecto.

Curiosamente, podemos expulsar un interceptor para evitar que tenga algún efecto. Tendremos que asignar el interceptor a una variable y expulsarlo usando el ejectmétodo con el nombre apropiado.

const reqInterceptor = axios.interceptors.request.use(function (config) { // Do something before request is sent, like we're inserting a timeout for only requests with a particular baseURL if (config.baseURL === 'https://axios-app.firebaseio.com/users.json') { config.timeout = 4000 } else { return config } console.log (config) return config;}, function (error) { // Do something with request error return Promise.reject(error);}); // Add a response interceptorconst resInterceptor = axios.interceptors.response.use(function (response) { // Do something with response data like console.log, change header, or as we did here just added a conditional behaviour, to change the route or pop up an alert box, based on the reponse status if (response.status === 200 || response.status 201) { router.replace('homepage') } else { alert('Unusual behaviour') } console.log(response) return response;}, function (error) { // Do something with response error return Promise.reject(error);});
axios.interceptors.request.eject(reqInterceptor);axios.interceptors.request.eject(resInterceptor);

Aunque se usa con menos frecuencia, es posible colocar un interceptor en una declaración condicional o eliminar uno en función de algún evento.

Con suerte, esto le dará una buena idea sobre la forma en que funciona axios y cómo se puede utilizar para mantener las solicitudes de API SECAS en una aplicación. Si bien arañamos la superficie al mencionar configuraciones y casos de uso comunes, axis tiene muchas otras ventajas que puede explorar en la documentación, incluida la capacidad de cancelar solicitudes y proteger contra la falsificación de solicitudes entre sitios, entre otras posibilidades increíbles.

Tal vez te puede interesar:

1. La innovación no puede mantener la Web rápida
2. Rendimiento web ultrarrápido
3. Tabla de contenidos fijos con estados activos de desplazamiento
4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

Manténgase SECO usando axios para solicitudes de API

Instalación y conceptos básicosConfiguración globalInstancia personalizadainterceptoresTal vez te puede interesar:Índice

programar

es

https://aprendeprogramando.es/static/images/programar-mantengase-seco-usando-axios-para-solicitudes-de-api-1553-0.jpg

2024-09-30

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente