I have code resembling the following snippet:
$http({
method: "GET",
url: "/path/to/route?id=" + id
})
.then(function (response) {
var data = response.data;
var summary = service.doSomething(data, function (error, result, response) {
if (error) {
handleError();
return;
}
$http({
method: "POST",
url: "path/to/another/route?key=" + data.key
})
.then(function () {
// do stuff...
});
});
summary.on("status", function () {
// do stuff...
});
})
.catch(function () {
handleError();
});
Is there a way to refactor something like this such that the code isn't nested? In essence, I have three requests which are all dependent on the values obtained by their predecessor. Help?
Convert the call-back based API to a promise:
function doSomethingPromise(data) {
var deferred = $q.defer();
service.doSomething(data, function (error, result, response) {
if (error) {
deferred.reject(error);
} else {
deferred.resolve({result: result, response: response});
};
return deferred.promise;
}
Related
Im trying to get initialize the scope variable via http get request in page load in first function but then when trying to use the scope variable in other function in the same page load, it is undefined.
app.controller('GradeAndSectionCtrl', function ($scope, $http) {
$scope.GetCategories = function () {
$http({
method: 'GET',
url: '/GradeAndSection/GetCategories'
}).then(function (response) {
$scope.categories = response.data;
if (response.data != null) {
$scope.drpCategory = $scope.categories[0].categoryID;
}
});
};
$scope.GetGrades = function () {
\\$scope.drpCategory; here; is; undefined;
$http({
method: 'GET',
url: '/GradeAndSection/GetGrades?categoryID=' + $scope.drpCategory
}).then(function (response) {
$scope.grades = response.data;
});
};
$scope.GetCategories();
$scope.GetGrades();
});
You are making asynchronous call using promises in your code therefore $scope.drpCategory may not be loaded when you call GetGrades function. You can call your GetGrades function when GetCategories is resolved.
$scope.GetCategories = function () {
$http({
method: "GET",
url: "/GradeAndSection/GetCategories"
}).then(function (response) {
$scope.categories = response.data;
if (response.data != null) {
$scope.drpCategory = $scope.categories[0].categoryID;
$scope.GetGrades();
}
});
}
Try to call the function GetGrades in then()
$scope.GetCategories = () => {
$http
({
method: 'GET',
url: 'categories.json',
})
.then(data => {
$scope.categories = data.data;
$scope.drpCategory = $scope.categories[0].category
$scope.GetGrades($scope.drpCategory)
}, function errorCallback(response) {
console.log(response);
console.log('error');
});
}
$scope.GetGrades = (drpCategory) => {
$http
({
method: "GET",
url: "categories_" + drpCategory + ".json"
}).then(function (response) {
$scope.grades = response.data;
console.log($scope.grades)
});
}
$scope.GetCategories()
Working example: http://plnkr.co/edit/ZN8nI7OhAyWiJWlqeJsU?p=preview
I have an service with methods that does requests to server:
this.add = function (data, cb) {
$http({
method: 'POST',
url: path
}).then(function successCallback(response) {
cb(response);
}, function errorCallback(response) {
// TODO
});
};
When I call add() as:
genresService.add(function (data) {
// TODO
});
I get error:
TypeError: cb is not a function
at successCallback (custom.js:329)
on line:
cb(response);
this.add = function (data, callback,error) {
$http({
method: 'POST',
url: path,
data: data
}).then(callback).catch(error);
};
//then call like this
genresService.add(myData ,function (res) {
console.log(res);
}
,function(errorResponse){
console.log(errorResponse);
});
You need to pass two params in your add function - first is data and other is callback function. You are only passing one. You need to pass two arguments like this,
genresService.add( data, function (data) {
// TODO
});
The 'add' function expects 2 parameters : data & a callback :
genresService.add(data,function (response) {
// TODO use response.data I presume
});
Maybe you want to do:
this.add = function (dataToPost, cb) {
$http.post(path,dataToPost)
.then(function successCallback(response) {
cb(response.data);
}, function errorCallback(response) {
// TODO
});
};
genresService.add(someData,function (data) {
// TODO use data I presume
});
this.add = function (jsonobj, callback) {
$http({
method: 'POST',
url: path,
data: jsonobj
}).then(function(res) {
callback(res);
}, function(err) {
callback(err)
});
};
//missing data like up : i call it jsonobj and finction got res is a callback
genresService.add(jsonobj ,function (res) {
console.log(res);
}
try it
I offloaded the call to the Twitter API from my controller into a service:
angular.module('main')
.service('Tweet', function ($log, $http, Config, $ionicLoading) {
this.show = function () {
$ionicLoading.show({
template: '<ion-spinner></ion-spinner><br>Loading'
}).then(function () {
$log.log("The loading indicator is now displayed");
});
};
this.hide = function () {
$ionicLoading.hide().then(function () {
$log.log("The loading indicator is now hidden");
});
};
var consumerKey = encodeURIComponent(Config.TWITTER.CONSUMERKEY);
var consumerSecret = encodeURIComponent(Config.TWITTER.CONSUMERSECRET);
var tokenCredentials = btoa(consumerKey + ':' + consumerSecret);
this.getToken = function () {
this.show();
return $http({
method: 'POST',
url: 'https://api.twitter.com/oauth2/token',
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
'Authorization': 'Basic ' + tokenCredentials
},
data: 'grant_type=client_credentials'
})
.then(function (result) {
if (result.data && result.data.access_token) {
$http.defaults.headers.common.Authorization = 'Bearer ' + result.data.access_token;
}
})
.catch(function (error) {
console.log(error);
});
};
this.getTimeline = function () {
$log.log($http.defaults.headers.common.Authorization);
return $http({
method: 'GET',
url: 'https://api.twitter.com/1.1/search/tweets.json?q=%40postbank',
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
}
})
.then(function (result) {
return result.data.statuses;
})
.catch(function (error) {
console.log(error);
});
};
this.analyzeResult = function (input) {
this.tweets = input;
this.hide();
};
var that = this;
this.getTweets = function () {
this.getToken()
.then(this.getTimeline)
.then(function (result) {
that.analyzeResult(result);
});
}
});
I inject the service into my main controller and call the getTweets() function:
angular.module('main')
.controller('MainCtrl', function ($log, Tweet) {
Tweet.getTweets();
});
I can see that all the promises are executed through the console, but this.tweets stays empty. How do I send the data that is coming from the service/promise to the controller?
this within service constructor is service's context, not controller's. And services shouldn't operate on the scope.
Unwrap service promise in controller:
var self = this;
Tweet.getTweets().then(function () {
self.tweets = input;
});
I want to access to response successCallback(response)
var list_of_user = $http({
method: 'GET',
url: '/users/'
}).then(function successCallback(response) {
$scope.all_users = response.data;
}, function errorCallback(response) {
console.log(response);
});
console.log("$scope.all_users ", $scope.all_users)
is undefiend
I can access $scope.all_users from html, but how can I access to $scope.all_users in controller?
$http is async and console.log is executed before actually request is completed.
As you defined in comment that you want to compare two responses you can do that by simply putting a flag that will wait for both requests to finish.
var done = 0;
var onRequestFinishes = function() {
done += 1;
if (done < 2) {
return; // one of both request is not completed yet
}
// compare $scope.response1 with $scope.response2 here
}
and send first request and save response to $scope.response1 and invoke onRequestFinishes after that.
$http({
method: 'GET',
url: '/users/'
}).then(function successCallback(response) {
$scope.response1 = response.data;
onRequestFinishes();
}, function errorCallback(response) {
console.log(response);
});
Similarly send second request
$http({
method: 'GET',
url: '/users/'
}).then(function successCallback(response) {
$scope.response2 = response.data;
onRequestFinishes();
}, function errorCallback(response) {
console.log(response);
});
For request handling you can create individual promise chains and use $q.all() to execute code when all promises are resolved.
var request1 = $http.get('/users/').then(function(response)
{
console.log('Users: ', response.data);
return response.data;
}
var request2 = $http.get('/others/').then(function(response)
{
console.log('Others: ', response.data);
return response.data;
}
$q.all([request1, request2]).then(function(users, others)
{
console.log('Both promises are resolved.');
//Handle data as needed
console.log(users);
console.log(others);
}
This code fetches categories and give them to controller.
sampleApp.factory('SCService', function($http, $q) {
var SuperCategories = [];
var SCService = {};
SCService.GetSuperCategories = function() {
var req = {
method: 'POST',
url: SuperCategoryURL,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
data: "action=GET"
};
if ( SuperCategories.length == 0 ) {
return $http(req).then(function (response) {
SuperCategories = response.data;
return SuperCategories;
});
}else {
return $q.when(SuperCategories);
}
}
return SCService;
});
I think code is perfect until there is no error in http request.
My query is how to do error handling (try catch or something like that), in case if server have some issue or may be cgi-script have some issue and not able to server the request.
Angular promises use a method catch for that.
return $http(req).then(function (response) {
SuperCategories = response.data;
return SuperCategories;
}).catch(function(error) {
// Do what you want here
});
You should use also finally :
return $http(req).then(function (response) {
SuperCategories = response.data;
return SuperCategories;
}).catch(function(error) {
// Do what you want here
}).finally(function() {
// Always executed. Clean up variables, call a callback, etc...
});
Write like
return $http(req).then(function (response) {
//success callback
},
function(){
//Failure callback
});
Use callback methods from controller Like
Controller.js
service.GetSuperCategories(function (data) {console.log('success'},function (error){console.log('error'});
service.js
sampleApp.factory('SCService', function($http, $q) {
var SuperCategories = [];
var SCService = {};
SCService.GetSuperCategories = function(successMethod,errorMethod) {
var req = {
method: 'POST',
url: SuperCategoryURL,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
data: "action=GET"
};
return $http(req).then(successMethod(data),
errorMethod(error));
}
return SCService;
});
You can use the .success and .error methods of $http service, as below
$http(req).success(function(data, status, headers){
// success callback: Enters if status = 200
}).error(function(status, headers){
// error callback: enters otherwise
});