Saltar al contenido

Cómo utilizar interceptores en Vue.js Con Vue resourceAug, 24thIn el último tutorial, hemos visto cómo hacer peticiones HTTP en vuejs …

marzo 13, 2020

 

En el último tutorial, hemos visto cómo hacer peticiones HTTP en vuejs utilizando vue-recursos, En este tutorial, vamos a aprender acerca de los interceptores de vue.js.

interceptores

interceptores nos ayudan a pre o post-procesamiento de una petición, esto significa que podemos modificar las peticiones antes de que se envía al servidor o podemos modificar las respuestas que regresan de la solicitud.

interceptores se definen a nivel mundial.

Interceptar una solicitud

Estamos utilizando paquete de cliente http vue de recursos para interceptar las peticiones en vuejs.

Ejemplo:

import Vue from "vue";
import App from "./App.vue";
import VueResource from 'vue-resource';

// telling vue.js to use this package
Vue.use(VueResource);
Vue.http.interceptors.push(function(request,next){
// modifying request headers
request.headers.set('X-CSRF-TOKEN', 'TOKEN'); request.headers.set('Authorization', 'Bearer TOKEN');
next();
})

new Vue({
render: h => h(App)
}).$mount("#app");

En el ejemplo anterior, primero importada VueResource y contando vue.js utilizar este paquete.

La función dentro de las carreras de método de inserción Antes de cada petición que enviamos desde nuestra aplicación Vue.

Dentro de esta función, se puede acceder a todo el objeto pedido, por lo que podemos modificar la solicitud de acuerdo con nuestras necesidades, al igual que en el ejemplo anterior nos propusimos Autorización de contadores a los encabezados de la solicitud.

Interceptar una respuesta

import Vue from "vue";
import App from "./App.vue";
import VueResource from 'vue-resource';

// telling vue.js to use this package
Vue.use(VueResource);

Vue.http.interceptors.push(function(request,next){

// modifying request headers
request.headers.set('X-CSRF-TOKEN', 'TOKEN');
request.headers.set('Authorization', 'Bearer TOKEN');

next(function(response){ //logging the response body console.log(response.body) });
})

new Vue({
render: h => h(App)
}).$mount("#app");

Aquí se define una función dentro de la próxima método, dentro de esa función se puede acceder al objeto respuesta que viene de vuelta de la API, al igual que en el código anterior que está registrando el cuerpo de la respuesta.