Using an interceptor in AngularJS how can console.log("finished AJAX request") when any request has completed?
I have been looking at interceptors and so far have the following but it fires on the start of the request not the end.
app.factory('myInterceptor', [function() {
console.log("finished AJAX request")
var myInterceptor = {
};
return myInterceptor;
}]);
config:
app.config(function ($stateProvider, $urlRouterProvider, $httpProvider) {
$httpProvider.interceptors.push('myInterceptor');
etc
You need to put the console in the response function of the httpInterceptor
// register the interceptor as a service
$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
return {
// optional method
'request': function(config) {
// do something on success
return config;
},
// optional method
'requestError': function(rejection) {
// do something on error
if (canRecover(rejection)) {
return responseOrNewPromise
}
return $q.reject(rejection);
},
// optional method
'response': function(response) {
// do something on success
console.log('I am done');
return response;
},
// optional method
'responseError': function(rejection) {
// do something on error
if (canRecover(rejection)) {
return responseOrNewPromise
}
return $q.reject(rejection);
}
};
});
$httpProvider.interceptors.push('myHttpInterceptor');
Over here in the response method I have included the console log function call
Related
I'm new angularJS student, and i want to get detail error's when i send a POST to WebApi.
I want to get Status 500 and Status 404, and make condition to show a feedback instead of the status error.
I have tried use "Intercepting HTTP calls with AngularJS", but everytime it returns 'Status -1'
Can anyone help me please?
Thanks!
#EDIT
.factory('ajaxFn', function ($http, $cookies, $location, $q) {
var post = function (url, objeto, data, successFn, errorFn) {
user = $cookies.get(btoa('user'));
pass = $cookies.get(btoa('pass'));
authHeader.Authorization = 'Basic ' + btoa(user + ':' + pass);
$http({
method: 'POST',
url: "//localhost:61115/api/main/" + CompleteUrl,
headers: authHeader,
params: objeto,
data: data
})
.then(function (result) {
successFn(result.data);
}, function (data) {
errorFn();
});
}
return {
post: post
};
})
And that is the intercepting code that i have tried
// Intercepting HTTP calls with AngularJS.
.config(function ($provide, $httpProvider) {
// Intercept http calls.
$provide.factory('MyHttpInterceptor', function ($q) {
return {
// On request success
request: function (config) {
// console.log(config); // Contains the data about the request before it is sent.
// Return the config or wrap it in a promise if blank.
return config || $q.when(config);
},
// On request failure
requestError: function (rejection) {
// console.log(rejection); // Contains the data about the error on the request.
// Return the promise rejection.
return $q.reject(rejection);
},
// On response success
response: function (response) {
// console.log(response); // Contains the data from the response.
// Return the response or promise.
return response || $q.when(response);
},
// On response failture
responseError: function (rejection) {
// console.log(rejection); // Contains the data about the error.
// Return the promise rejection.
return $q.reject(rejection);
}
};
});
// Add the interceptor to the $httpProvider.
$httpProvider.interceptors.push('MyHttpInterceptor');
})
I am trying to use angular's http cache but the result is undefined. Cache returns an object but usersCache is undefined.
controller in main.js
app.controller('exploreController', function($scope, dataService, $cookies, $cacheFactory, $http) {
// dataService.explorePosts();
$scope.explore = function(){
dataService.explorePosts();
var cache = $cacheFactory.get('$http');
console.log(cache);
var usersCache = cache.get('http://dstm.herokuapp.com/api/explore');
console.log(usersCache);
};
$scope.explore();
});
service in data.js
angular.module('dsnApp')
.service('dataService', function($http, $cookies, $cacheFactory) {
this.explorePosts = function(){
var id = $cookies.get("userId");
$http.get('http://dstm.herokuapp.com/api/explore', {cache: true,
params: {userId: id, page: 1},
})
.then(function successCallback(response) {
console.log(response);
}, function errorCallback(response) {
console.log(response);
});
};
#charlietfl is right.
$http is asynchronous.Nothing will be cached until the request
completes and you are trying to access the cache synchronously.
To make this work as you expect:
First, make the this.explorePosts function return the promise, which $http service alredy returns.
this.explorePosts = function(){
var id = $cookies.get("userId");
return $http.get('http://dstm.herokuapp.com/api/explore', {cache: true,
params: {userId: id, page: 1},
})
.then(function successCallback(response) {
console.log(response);
}, function errorCallback(response) {
console.log(response);
});
};
Then use the cache in the promise's then callback.
$scope.explore = function() {
dataService.explorePosts().then(function () {
var cache = $cacheFactory.get('$http');
console.log(cache);
var usersCache = cache.get('http://dstm.herokuapp.com/api/explore');
console.log(usersCache);
});
};
I am trying to catch server error for eg 500 in my angular app. Unfortunately this construction fails:
return promise = this.httpService.jsonp("serverurl")
.success((response: any): ng.IPromise<any> => { return response.data; })
.error((response: any): ng.IPromise<any> => { return response.data; });
I want to catch server response - in this case simply the message. How to do this?
The $http service is a function which takes a single argument — a configuration object — that is used to generate an HTTP request and returns a promise.
// Simple GET request example:
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
console.log(response); // add console log of response
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
console.log(response); // add console log of error response
});
Or a interceptor can be used to "monitor" all http's:
// register the interceptor as a service
$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
return {
// optional method
'request': function(config) {
// do something on success
return config;
},
// optional method
'requestError': function(rejection) {
// do something on error
if (response.status === 500) {
//DO WHAT YOU WANT
}
return $q.reject(rejection);
},
// optional method
'response': function(response) {
// do something on success
return response;
},
// optional method
'responseError': function(rejection) {
// do something on error
if (response.status === 500) {
//DO WHAT YOU WANT
}
return $q.reject(rejection);
}
};
});
$httpProvider.interceptors.push('myHttpInterceptor');
In AngularJS I have config for default headers (for Authentification)
it works fine, every $http request going with right headers.
But for some request I need to change this headers to another values. But I cant! I can only add new one, but can't rewrite previous value.
Thanks!
Here is a thousands lines of code, so there is most important part of this issue
//THIS PART OF CONFIG
.config(['$locationProvider',
'$stateProvider',
'$urlRouterProvider',
'$httpProvider',
function ($locationProvider, $stateProvider, $urlRouterProvider, $httpProvider){
//....
$httpProvider.interceptors.push('AuthInterceptor');
}
// THIS FACTORY
.factory('AuthInterceptor', ['$q',
function($q) {
return {
request: function(config) {
config.headers = config.headers || {};
config.headers.Authorization = 'OldValue';
return config || $q.when(config);
},
response: function(response){
if (response.status === 401) {
console.log('Response 401');
}
return response || $q.when(response);
},
responseError: function(rejection) {
if (rejection.status === 401) {
console.log('Response Error 401',rejection);
}
return $q.reject(rejection);
}
};
}
])
//THIS PART OF CONTROLLER
$scope.makeRequest = function(){
var request = $http({
method: 'GET',
headers: {
'Authorization' : 'NewValue', // do not work
'NewAuthorisatnion' : 'AnotherValue' // works fine
url: '/'
});
request.
success(function (data) {
//...
});
}
I've impelmented the httpInterceptor found here.
If my Basic Auth header has valid credentials, everything works fine, but if I get back a 401, then the application just hangs and I never receive a response.
Here's my interceptor:
angular.module('TDE').factory('httpInterceptor', function httpInterceptor ($q, $window, $location) {
return function (promise) {
var success = function (response) {
//window.logger.logIt("httpInterceptor received a good response: " + response);
return response;
};
var error = function (response) {
//window.logger.logIt("httpInterceptor received an error: " + response);
if (response.status === 401) {
$location.url('/login');
}
return $q.reject(response);
};
return promise.then(success, error);
};
});
Declaring the httpInterceptor in app.js
angular.module('TDE', []);
var TDE = angular.module('TDE', ['ux', 'ngRoute', 'ngResource', 'TDE', 'hmTouchEvents', 'infinite-scroll', 'ui.bootstrap', 'ui.sortable']);
TDE.config(['$routeProvider', '$locationProvider', '$httpProvider', function ($routeProvider, $locationProvider, $httpProvider) {
$httpProvider.responseInterceptors.push('httpInterceptor');
$routeProvider
.when('/', {})
.when('/login', { templateUrl: "Views/Login/login.html", controller: "LoginController" })
And my authenticate method
authenticate: function (user, password) {
// window.logger.logIt("serviceAccount: " + $rootScope.serviceAccount);
window.logger.logIt("In authenticate...");
var deferred = $q.defer();
var encoded = encoder.encode($rootScope.serviceAccount);
//var encoded = encoder.encode(user + ":" + password);
if (user && password) {
window.logger.logIt("We've got a username and password...");
$http.defaults.headers.common.Authorization = 'Basic ' + encoded;
sessionStorage.setItem('Authorization', $http.defaults.headers.common.Authorization);
var url = $rootScope.serviceBaseUrl + "login/authenticate";
window.logger.logIt(url);
$http({
method: "POST",
url: url,
data: {
"Username": user,
"Password": password,
"AccessToken": ""
},
headers: {
"Content-Type": "application/json"
}
})
.success(function (data, status, headers, config) {
window.logger.logIt("We've got a response (success)...");
if (data.IsAuthenticated) {
deferred.resolve(data);
session.setSession();
} else {
deferred.reject(status);
}
})
.error(function (data, status, headers, config) {
window.logger.logIt("We've got a response (error)...");
$dialogservice.showMessage("Authentication Error", "Return Code: " + status);
deferred.reject(status);
});
} else {
window.logger.logIt("We've got a response...");
deferred.reject(401);
}
return deferred.promise;
},
You'll see that in my Authenticate method, there are two lines that I'm testing:
var encoded = encoder.encode($rootScope.serviceAccount);
and
var encoded = encoder.encode(user + ":" + password);
We are REQUIRED to use Basic Authentication (which is over SSL). Right now, all I'm testing is that I can receive a 401 back. If I use the $rootScope.serviceAccount (which is working), I get a 200 response right away. But if I purposely send a bad username/password, I NEVER get a response, the application just sits there.
Edit: Ok, I've updated my code to the following, and still getting the same behavior:
angular
.module('TDE')
.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push(function ($q) {
return {
'request': function (config) {
window.logger.logIt("Request is being sent...");
var headers = config.headers;
if (!headers.Authorization) {
headers.Authorization = sessionStorage.getItem('Authorization');
}
return config || $q.when(config);
},
'response': function (response) {
window.logger.logIt("got a good response...");
return response;
},
'responseError': function (rejection) {
window.logger.logIt("responseError error...");
return $q.reject(rejection);
},
};
});
}]);
Well, again, PhoneGap is the issue!!!!!!!!!!!!!!!!!
Example 1
Example 2
Example 3
Example 4
Try this interceptor:
.factory('httpInterceptor', function(){
return {
request : function(yourRequestConfig){
var returnPromise = $q.defer();
$http(yourRequestConfig).then(function(response) {
console.log("successful response from server ", response);
returnPromise.resolve(response);
}, function(someReason) {
console.log("failure response from server", reason);
returnPromise.reject(reason);
});
return returnPromise.promise;
}
}
});
used as
httpInterceptor.request(request config).then(returnValue){
console.log('inside controller', returnValue);
});
where request config is something like:
var requestConfig = {
method: "GET",
url: "localhost:8080/getStuff"
};