Apprenez rapidement l'intercepteur de réponse HTTP AngularJs_AngularJS

À tout moment, si nous souhaitons ajouter des fonctionnalités globales à la requête, telles que l'authentification, la gestion des erreurs, etc., c'est une meilleure façon d'intercepter la requête avant qu'elle ne soit envoyée au serveur ou au retour du serveur.

angularJs fournit un moyen de traiter au niveau global via des intercepteurs.

Quatre types d'intercepteurs

Implémenter la méthode de requête pour intercepter les requêtes

request: function(config) {
// do something on request success
return config || $q.when(config);
} 

Cette méthode sera exécutée avant que $http envoie la requête en arrière-plan, afin que vous puissiez modifier la configuration ou effectuer d'autres opérations. Cette méthode reçoit un objet de configuration de requête en paramètre et doit renvoyer un objet de configuration ou une promesse. Si un objet de configuration ou une promesse non valide est renvoyé, il sera rejeté, entraînant l'échec de l'appel $http.

Implémenter la méthode requestError pour intercepter les exceptions de requête

requestError: function(rejection) {
　　// do something on request error　　return $q.reject(rejection);
} 

Parfois, une requête ne parvient pas à être envoyée ou est rejetée par un intercepteur. L'intercepteur d'exception de requête capturera les requêtes qui ont été interrompues par l'intercepteur de requête précédent. Il peut être utilisé pour restaurer la demande ou parfois pour annuler la configuration effectuée avant la demande, comme fermer la barre de progression, activer les boutons et les zones de saisie, etc.

Implémenter la méthode de réponse pour intercepter la réponse

response: function(response) {
　　// do something on response success
return response || $q.when(response);} 

Cette méthode sera exécutée après que $http aura reçu la réponse de l'arrière-plan, vous pourrez donc modifier la réponse ou effectuer d'autres opérations. Cette méthode reçoit un objet de réponse en tant que paramètre et doit renvoyer un objet de réponse ou une promesse. L'objet de réponse comprend la configuration de la demande, les en-têtes, l'état et les données en arrière-plan. Si un objet de réponse non valide est renvoyé ou si la promesse est rejetée, l'appel $http échouera.

Implémenter la méthode ResponseError pour intercepter les exceptions de réponse

responseError: function(rejection) {
// do something on response error　　return $q.reject(rejection);
} 

Parfois, notre appel en arrière-plan échoue, ou il peut être rejeté par un intercepteur de requête ou interrompu par un intercepteur de réponse précédent. Dans ce cas, l'intercepteur d'exception de réponse peut nous aider à reprendre l'appel en arrière-plan.

Noyau d'intercepteur

Usine de services d'interception

var app = angular.module("ajaxHttp", []);
app.factory("httpInterceptor", [ "$q", "$rootScope", function($q, $rootScope) {
return {
request: function(config) {
// do something on request success
return config || $q.when(config);
},
　　 requestError: function(rejection) {
　　　　 // do something on request error
　　　　 return $q.reject(rejection)
　　 },
response: function(response) {
// do something on response success
return response || $q.when(response);
},
responseError : function(rejection) {
// do something on response error
return $q.reject(rejection);
}
};
}]); 

Enregistrer la méthode de fabrique d'interception

app.config(["$httpProvider", function($httpProvider) {
　　$httpProvider.interceptors.push("httpInterceptor");
}]); 

Exemple

Interception et traitement des 401, 404

app.config(["$httpProvider", function($httpProvider) { 
$httpProvider.interceptors.push('httpInterceptor'); 
}]); 
app.factory("httpInterceptor", ["$q", "$injector", function($q, $injector) {
return {
"responseError": function(response) {
if (response.status == 401) {
var rootScope = $injector.get('$rootScope');
var state = $injector.get('$rootScope').$state.current.name;
rootScope.stateBeforLogin = state;
rootScope.$state.go("login");
return $q.reject(response);
}
else if (response.status === 404) {
console.log("404!");
return $q.reject(response);
}
}
};
]);

Le contenu ci-dessus a pour but de partager avec vous les connaissances pertinentes sur l'apprentissage rapide de l'intercepteur de réponse HTTP AngularJs. J'espère que vous l'aimerez et merci pour votre soutien continu au site Web de Script House.