Angular wait for service function Ajax completed - javascript

I want to get from my controller the result of an $http request.
Here is my service :
.service('postService', function($http, apiUrl) {
return {
post: function(uri, params) {
$http.post(apiUrl + uri, params).then(function(items) {
return items.data;
});
}
};
})
And here what I've done in my controller :
var getData = postService.post('my_service_url', {id: 'test'});
getData.then(function(result) {
$scope.data = result;
console.log(data);
});
But I catch the error :
getData is undefined
What is the way to achieve this ?

You need to return the $http.post
return {
post: function(uri, params) {
return $http.post(apiUrl + uri, params);
}
};
Then you can hook up your then:
var getData = postService.post('my_service_url', {id: 'test'});
getData.then(function(result) {
$scope.data = result;
console.log(data);
});

Try it with the $q module of angularjs:
https://docs.angularjs.org/api/ng/service/$q
Your service code could look like this:
.service('postService', function($http, $q, apiUrl) {
return {
post: function(uri, params) {
var deferred = $q.defer();
$http.post(apiUrl + uri, params).then(function(items) {
deferred.resolve(items.data);
}, function() {
// error case
deferred.reject();
});
return deferred.promise;
}
};
})

Related

AngularJS service that uses multiple $http.get

I'm trying to learn AngularJS and I have the following service that works, but I'm wondering if there's a better way of writing it that is simpler and involves less duplication of code. Can you think of anything?
The service:
app.service("myService", function ($http) {
this.callData1 = function () {
var url = myurl1;
function getData() {
return $http.get(url);
}
return {
getData: getData,
}
},
this.callData2 = function () {
var url = myurl2;
function getData() {
return $http.get(url);
}
return {
getData: getData,
}
},
this.callData3 = function () {
var url = myurl3;
function getData(var1, var2) {
return $http({
url: url,
method: "GET",
params: { var1: var1, var2: var2 }
});
}
return {
getData: getData,
}
}
});
My controller:
app.controller("myController", function ($scope, myService) {
myService.callData1().getData().then(function (response) {
$scope.var1 = response.data;
});
myService.callData2().getData().then(function (response) {
$scope.var2 = response.data;
});
var var1 = "something";
var var2 = "something else";
myService.callData3().getData(var1, var2).then(function (response) {
$scope.var3 = response.data;
});
});
You can generalize it as follows:
app.service("myService", function ($http) {
this.getData = function(url, method, params){
var httpParams = {
url: url,
method: method || "GET", // If method is skipped, use "GET" by default
params: params || {} // If no params are given, take {}
};
return $http.get(httpParams);
};
});
And in controller, you can use this service as follows:
app.controller("myController", function ($scope, myService) {
var url = "https://blahblah";
myService.getData(url).then(function (response) {
$scope.var1 = response.data;
});
var params = {var1: "something", var2: "something2"};
myService.getData(url, "POST", params).then(function (response) {
$scope.var1 = response.data;
});
});

Making Sync calls using promises Angular JS factories

I am trying to make sync calls using a factory pattern.
$scope.doLogin = function (username, password, rememberme) {
appKeyService.makeCall().then(function (data) {
// data = JSON.stringify(data);
debugAlert("login controller app key service"+data);
var appkeyvalue = data.d.appkey;
sessionConfigurationService.setBasicToken(appkeyvalue);
loginService.makeCall(username, password, rememberme).then(function (accessTokenData) {
if (accessTokenData.access_token !== "")
{
sessionConfigurationService.setAccessTokenData(accessTokenData.access_token);
userPreferencesService.makeCall().then(function (userPreferencesData) {
if (userPreferencesData.d.userId !== "")
{
sessionConfigurationService.setUserPreferences(userPreferencesData.d);
// $window.location.href = '/base.html';
}
});
}
});
});
};
My appKeyService factory is
app.factory('appKeyService', function ($q, authenticatedServiceFactory, configurationService) {
var deffered = $q.defer();
var service = {};
service.makeCall = function () {
debugAlert("appKeyService async method request start");
authenticatedServiceFactory.makeCall("GET", configurationService.getAppKeyURL(), "", "").then(function (data) {
debugAlert("appKeyService async method response")
deffered.resolve(data);
});
return deffered.promise;
};
return service;
});
My authenticated service factory is
app.factory('authenticatedServiceFactory', function ($http, $q, sessionConfigurationService) {
var deffered = $q.defer();
var service = {};
service.makeCall = function (methodType, URL, data, authType) {
var headerValue = "";
if (authType === "Basic") {
headerValue = sessionConfigurationService.getBasicToken();
} else if (authType === "Bearer") {
headerValue = sessionConfigurationService.getBearerToken();
}
var config = {headers: {
'Authorization': headerValue,
'Accept': 'application/json;odata=verbose',
},
withCredentials: true,
async: false
};
if (methodType === "GET") {
$http.get(URL, data, config)
.then(function (getData) {
debugAlert("GET method response" + JSON.stringify(getData));
deffered.resolve(getData.data);
}, function (error) {
debugAlert("GET method response error" + JSON.stringify(error));
deffered.reject(error);
});
}
else if (methodType === "POST") {
$http.post(URL, data, config)
.then(function (putData) {
debugAlert("POST method response" + JSON.stringify(putData));
deffered.resolve(putData.data);
}, function (error) {
debugAlert("POST method response error" + JSON.stringify(error));
deffered.reject(error);
});
}
else if (methodType === "DELETE") {
$http.delete(URL, data, config)
.then(function (deleteData) {
debugAlert("DELETE method response" + JSON.stringify(deleteData));
deffered.resolve(deleteData.data);
}, function (error) {
debugAlert("DELETE method response error" + JSON.stringify(error));
deffered.reject(error);
});
}
else if (methodType === "PUT") {
$http.put(URL, config)
.then(function (putData) {
debugAlert("PUT method response" + JSON.stringify(putData));
deffered.resolve(putData.data);
}, function (error) {
debugAlert("PUT method response error" + JSON.stringify(error));
deffered.reject(error);
});
}
return deffered.promise;
};
return service;
});
But I don't see the service calls are made in sync. So the "then" part in the controller is not executing after we receive the response. Its executing one after the other. How can I make that happen.
#Frane Poljak
Thank you for your comment. I just brought
var deffered = $q.defer();
inside the makeCall method and its working as I wanted now. Thank you!
app.factory('appKeyService', function ($q, authenticatedServiceFactory, configurationService) {
var service = {};
service.makeCall = function () {
var deffered = $q.defer();
debugAlert("appKeyService async method request start");
authenticatedServiceFactory.makeCall("GET", configurationService.getAppKeyURL(), "", "").then(function (data) {
debugAlert("appKeyService async method response")
deffered.resolve(data);
});
return deffered.promise;
};
return service;
});

How do I avoid a function expression when trying to return a local variable within an AngularJS factory?

How do I return "stories" by issuing "vm.stories = storyDataAsFactory.stories" vs. what I do now, which is "vm.stories = storyDataAsFactory.stories()" ? I've tried every combination possible without success. Furthemore, I'm able to call storyDataAsFactory.getStories without the parenthesis, which makes sense based on how I have it configured, but when I create a function that returns self.stories it doesn't work.
The below code works as specified -
storyDataAsFactory.$inject = ['$http', '$q'];
angular.module('ccsApp').factory('storyDataAsFactory', storyDataAsFactory);
function storyDataAsFactory($http, $q) {
var self = this;
var stories = [];
function getStories(url) {
url = url || '';
var deferred = $q.defer();
$http({method: 'GET', url: url})
.success(function (data, status, headers, config) {
self.stories = data;
deferred.resolve(data);
})
.error(function (data, status, headers, config) {
deferred.reject(status);
});
return deferred.promise;
}
function listStories() {
return self.stories;
}
return {
stories: listStories,
getStories: getStories('stories.json')
};
}
UPDATE:
I'm still having problems. Here's my exact code, which I changed per the community -
storyDataAsFactory.$inject = ['$http', '$q'];
angular.module('ccsApp').factory('storyDataAsFactory', storyDataAsFactory);
function storyDataAsFactory($http, $q) {
var stories = [];
function getStories(url) {
url = url || '';
if (url !== '') {
var deferred = $q.defer();
//determine if ajax call already occurred;
//if so, data exists in cache as local var
if (stories.length !== 0) {
deferred.resolve();
return deferred.promise;
}
$http({method:'GET', url:url})
.success(function (data, status, headers, config) {
stories = data;
deferred.resolve();
})
.error(function (data, status, headers, config) {
deferred.reject(status);
});
return deferred.promise;
} else {
alert('URL was empty.');
}
}
return {
stories: stories,
getStories: function(url) {
getStories(url);
}
};
}
storyDataAsFactory.stories does not return anything. Remember, I've ensued that resolve fired appropriately so this is not an async. issue. I just don't get this! I've been at it for hours w/o success.
I think you are confused with Angular service and factory concept:
Lets dicuss below:
Angular service:
module.service( 'serviceName', function );
Result: When declaring serviceName as an injectable argument you will be provided
with the instance of a function passed to module.service.
Angular factory
module.factory( 'factoryName', function );
Result: When declaring factoryName as an injectable argument you will be provided
the value that is returned by invoking the function reference passed to
module.factory. So if you want to access the methods of that factory then
they should be there along with returned value.
Angular's service version of your given code will be:
schoolCtrl.service('storyDataAsService', storyDataAsService);
function storyDataAsService($http, $q) {
var self = this;
var stories = [];
this.getStories = function(url) {
url = url || '';
var deferred = $q.defer();
$http({method: 'GET', url: url})
.success(function (data, status, headers, config) {
self.stories = data;
deferred.resolve(data);
})
.error(function (data, status, headers, config) {
deferred.reject(status);
});
return deferred.promise;
};
this.stories = function(){
// #TODO return value
}
}
Angular's factory version:
storyDataAsFactory.$inject = ['$http', '$q'];
angular.module('ccsApp').factory('storyDataAsFactory', storyDataAsFactory);
function storyDataAsFactory($http, $q) {
var self = this;
var stories = [];
function getStories(url) {
url = url || '';
var deferred = $q.defer();
$http({method: 'GET', url: url})
.success(function (data, status, headers, config) {
self.stories = data;
deferred.resolve(data);
})
.error(function (data, status, headers, config) {
deferred.reject(status);
});
return deferred.promise;
}
return {
stories: function() {
// #TODO return value
},
getStories: getStories
};
}
In your case self is provider of your factory storyDataAsFactoryProvider. But you need use local variable stroies, not provider object field self.stroies. I have fixed your bugs. Now it works.
UPD: if you want to use stories as field instead of getter you cannot change local variable (reference to original array). You may modify original array only.
storyDataAsFactory.$inject = ['$http', '$q'];
angular.module('ccsApp', /*XXX added []*/[]).factory('storyDataAsFactory', storyDataAsFactory);
function storyDataAsFactory($http, $q) {
var stories = [];
function getStories(url) {
url = url || '';
if (url !== '') {
var deferred = $q.defer();
//determine if ajax call already occurred;
//if so, data exists in cache as local var
if (stories.length !== 0) {
deferred.resolve();
return deferred.promise;
}
$http({method:'GET', url:url})
.success(function (data, status, headers, config) {
// XXX using this code you lose original array
//stories = data;
// XXX instead you need to clear and to fill original array
stories.splice(0, stories.length);
data.forEach(function(x) { stories.push(x); });
deferred.resolve();
})
.error(function (data, status, headers, config) {
deferred.reject(status);
});
return deferred.promise;
} else {
alert('URL was empty.');
}
}
return {
stories: stories, // XXX using field instead of getter you need to keep original array
getStories: function(url) {
getStories(url);
}
};
}
// ------------ tests --------------------
describe('storyDataAsFactory.stories()', function() {
var $httpBackend, $http, $q, storyDataAsFactory;
beforeEach(module('ccsApp'));
beforeEach(inject(function(_$httpBackend_) {
$httpBackend = _$httpBackend_;
$httpBackend.whenGET('stories.json').respond([1, 2, 3]);
}));
beforeEach(inject(function(_$http_, _$q_, _storyDataAsFactory_) {
$http = _$http_;
$q = _$q_;
storyDataAsFactory = _storyDataAsFactory_;
}));
it('should return empty array before ajax resolved', function() {
storyDataAsFactory.getStories('stories.json');
expect(storyDataAsFactory.stories).toEqual([]);
$httpBackend.flush();
});
it('should return filled array after ajax resolved', function() {
storyDataAsFactory.getStories('stories.json');
$httpBackend.flush();
expect(storyDataAsFactory.stories).toEqual([1, 2, 3]);
});
});
// ------------ run tests --------------------
window.onload = function() {
var jasmineEnv = jasmine.getEnv();
var htmlReporter = new jasmine.HtmlReporter();
jasmineEnv.addReporter(htmlReporter);
jasmineEnv.execute();
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/1.3.1/jasmine.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/1.3.1/jasmine.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/1.3.1/jasmine-html.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-mocks.js"></script>

AngularJS: Catch all response status 500

This may seem like a strange request. I was wondering if there is a way using a $http interceptor to catch the first URL that has a response status of 500, then stop all subsequent requests and processes and do something?
Thomas answer is correct, but this solution is currently deprecated. You should do something like this answer.
app.factory('errorInterceptor', function ($q) {
var preventFurtherRequests = false;
return {
request: function (config) {
if (preventFurtherRequests) {
return;
}
return config || $q.when(config);
},
requestError: function(request){
return $q.reject(request);
},
response: function (response) {
return response || $q.when(response);
},
responseError: function (response) {
if (response && response.status === 401) {
// log
}
if (response && response.status === 500) {
preventFurtherRequests = true;
}
return $q.reject(response);
}
};
});
app.config(function ($httpProvider) {
$httpProvider.interceptors.push('errorInterceptor');
});
You can catch all responses through $httpProvider.responseInterceptors.
To do this you have to create a factory like this:
app.factory('SecurityHttpInterceptor', function($q) {
return function (promise) {
return promise.then(function (response) {
return response;
},
function (response) {
if (response.status === 500) {
//DO WHAT YOU WANT
}
return $q.reject(response);
});
};
});
In this factory you'll catch the response status if it's 500 do what you want. Then reject the response.
Now you have to put the factory in the responseInterceptors of $httProvider in your config module like that :
app.config(function ($routeProvider, $httpProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
})
.otherwise({
templateUrl: 'views/404.html'
});
$httpProvider.responseInterceptors.push('SecurityHttpInterceptor');
})
You could create a service and interceptor to deal with this,
.factory('ServerErrorService', function() {
var _hasError = false
return {
get hasError() {
return _hasError;
},
set hasError(value) {
_hasError = value;
// you could broadcast an event on $rootScope to notify another service that it has to deal with the error
},
clear: clear
}
function clear() {
_hasError = false;
}
})
.factory('ServerErrorInterceptor', function ($q, ServerErrorService) {
var interceptor = {
request: function(config) {
if(ServerErrorService.hasError) {
var q = $q.defer();
q.reject('prevented request');
return q.promise;
}
return config;
},
responseError: function(response) {
if(response.status === 500) {
ServerErrorService.hasError = true;
}
return $q.reject(response);
}
}
return interceptor;
})
If you wanted to allow requests to be made again then you just need to call ServerErrorService.clear()
OR
You could use a modified version of this answer. Although i'm not sure how - if you wanted to - you'd cancel this action and allow subsequent requests.
https://stackoverflow.com/a/25475121/1798234
.factory('ServerErrorInterceptor', function ($q) {
var canceller = $q.defer();
var interceptor = {
request: function(config) {
config.timeout = canceller.promise;
return config;
},
responseError: function(response) {
if(response.status === 500) {
canceller.resolve('server error');
}
return $q.reject(response);
}
}
return interceptor;
})
One thing to remember for both of these solutions, if you have any other interceptors after this that have a responseErrormethod defined or any handlers set up with .catch to process the $http promise, they will receive a response object with {data:null, status:0}

How to create a dynamic file resource from angular service factory?

It is possible to have a dynamic file resource?
This is my factory
factory('fileResourcedc', function ($resource) {
var FileResourcedc = $resource(
'xml/file.json',{},
{
get:{method:'GET', isArray:false}
}
);
return FileResourcedc;
})
And I am calling it from here:
var deferred = $q.defer();
var successFn = function (result) {
if (angular.equals(result, [])) {
deferred.reject("Failed because empty : " + result.message);
}
else {
deferred.resolve(result);
}
};
var failFn = function (result) {
deferred.reject("Failed dataconfResponse");
};
fileResourcedc.get(successFn, failFn);
return deferred.promise;
Note that in my factory, the filename is hard coded:
'xml/file.json'
What I need is to create a filename parameter and pass it to factory service. Is it possible?
Thaks in advance
This was my solution:
factory('fileResourcedc', function ($resource) {
var FileResourcedc = $resource(
'xml/:myFile',
{},
{
get:{method:'GET', params:{myFile:""}, isArray:false}
}
);
FileResourcedc.prototype.getCatalogue = function (fileName, successCat, failCat) {
return FileResourcedc.get({myFile:fileName}, successCat, failCat);
};
return new FileResourcedc;
})
Call:
var deferred = $q.defer();
var successFn = function (result) {
if (angular.equals(result, {})) {
deferred.reject("No catalogue");
}
else {
deferred.resolve(result);
}
};
var failFn = function (result) {
deferred.reject("Failed catalogue");
};
fileResourcedc.getCatalogue("catalogues.json",successFn, failFn);
return deferred.promise;
Thanks!

Categories