I am encountering some challenges with promises when it comes to chaining multiple ones. I'm having difficulty distinguishing how to effectively utilize promises and their differences with callbacks. I've noticed that sometimes callbacks are triggered regardless of whether a promise is resolved, which makes the implementation below unreliable (unless there's an issue with my syntax or logic).
I went through the official documentation and came up with this code snippet, but I'm unsure if it's implemented correctly.
The registration flow works as follows:
- User selects an Alias -> Details Alias + userID (Device's Universally Unique Identifier) are sent to the server.
- If the Alias is available, an ApiKey(token) is generated, user registered, and the response is sent back to the client side (Stored in DB).
Services.js
(function(angular) {
myApp.factory("deviceDB.Service", ['$resource', '$http', '$q',
function ($resource, $http , $q ) {
return {
//Second Promise: After API token is generated server-side, store response in the database
RegDevice: function (alias, apiKey, userID) {
var deferred = $q.defer();
var configuration ;
var db = window.sqlitePlugin.openDatabase({name: "config.db"});
setTimeout(function () {
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS user_details (userID UNIQUE , alias TEXT, apiKey TEXT)');
tx.executeSql("INSERT INTO user_details (userID, alias, apiKey) VALUES (?,?,?)", [userID, alias, apiKey], function (tx, res) {
deferred.resolve(configuration = true);
}, function (e) {
// console.log("ERROR: " + e.message);
deferred.reject(configuration = false);
});
});
}, 1000);
return deferred.promise;
},
//First Promise: Register user on the server side & generate API token
RegUser: function (alias, userID) {
var deferred = $q.defer();
var pro;
pro = $resource('api/query/register', {'alias': alias, 'userID': userID},
{ query: {
isArray: false,
method: 'GET' } });
setTimeout(function () {
pro.query(function (res) {
if (res.error) {
deferred.reject( { error : res.error, exists: res.exists, msg: res.message } );
}
else {
deferred.resolve( {error : res.error , alias: res.alias , apiKey: res.apiKey, msg: res.message } );
}
}, function (e) {
deferred.reject( { errorStatus: e.status } );
});
}, 1000);
return deferred.promise;
}
};
}]);
}(window.angular));
Now, in My controller, I would like to chain both promises mentioned above. In the Documentation, it states:
then(successCallback, errorCallback, notifyCallback)- What is the purpose of using Callbacks if they can be triggered regardless of whether the Promise is resolved?
- Shouldn't I call for example Promise2 within the first Promise's Success Callback? If it is triggered irrespective of whether Promise1 is resolved, how can I chain Promise2 so that it is executed only when Promise1 is resolved?
What I have attempted:
Controller.js
myApp.controller('RegisterController', ['$scope', '$http', 'deviceDB.Service',
function ($scope , $http , deviceDB.Service) {
var Promise1 = deviceDB.RegUser($scope.alias, $scope.Device);
// First promise - Validate with server
Promise1.then(function(data)
{
console.log(' Registration Server-Side successfully');
$scope.apiKey = data.apiKey;
term.echo(data.apiKey);
}, function(e)
{
console.log('Registration Failed');
term.echo(e.msg);
})
//Call Promise 2 & Store details Client-Side using .then()
.then(deviceDB.RegDevice($scope.alias, $scope.apiKey, $scope.Device),
function(d){
console.log('Items Stored in DB successfully');
}, function()
{
console.log('Items Stored in DB Failed');
});
}]);
Notes: I understand storing details client-side is not recommended practice, however, I am exploring a different concept (anonymous messaging) where there are no security concerns..
Thank you for taking the time to read this.