Comment retourner une promesse résolue D'un service AngularJS en utilisant $q?
Mon service est:
myApp.service('userService', [
'$http', '$q', '$rootScope', '$location', function($http, $q, $rootScope, $location) {
var deferred;
deferred = $q.defer();
this.initialized = deferred.promise;
this.user = {
access: false
};
this.isAuthenticated = function() {
this.user = {
first_name: 'First',
last_name: 'Last',
email: 'email@address.com',
access: 'institution'
};
return deferred.resolve();
};
}
]);
je suis d'appeler dans mon config le fichier via:
myApp.run([
'$rootScope', 'userService', function($rootScope, userService) {
return userService.isAuthenticated().then(function(response) {
if (response.data.user) {
return $rootScope.$broadcast('login', response.data);
} else {
return userService.logout();
}
});
}
]);
cependant, il se plaint que then n'est pas une fonction. Ne suis-je pas le retour de l'résolu promesse?
7 réponses
à Partir de votre méthode de service:
function serviceMethod() {
return $timeout(function() {
return {
property: 'value'
};
}, 1000);
}
serviceName
.serviceMethod()
.then(function(data){
//handle the success condition here
var x = data.property
});
comment simplement retourner une promesse pré-résolue en angulaire
promesse résolue:
return $q.when( someValue ); // angular 1.2+
return $q.resolve( someValue ); // angular 1.4+, alias to `when` to match ES6
promesse rejetée:
return $q.reject( someValue );
retourner votre promesse, retour différé.promettre.
C'est L'API promise qui a la méthode 'then'.
https://docs.angularjs.org/api/ng/service/ $ q
l'Appel de résoudre ne renvoie pas une promesse uniquement les signaux de la promettez que la promesse est résolue afin qu'elle puisse exécuter la logique "alors".
schéma de base comme suit, rincer et je répète.
http://plnkr.co/edit/fJmmEP5xOrEMfLvLWy1h?p=preview
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5"
src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="test">
<button ng-click="test()">test</button>
</div>
<script>
var app = angular.module("app",[]);
app.controller("test",function($scope,$q){
$scope.$test = function(){
var deferred = $q.defer();
deferred.resolve("Hi");
return deferred.promise;
};
$scope.test=function(){
$scope.$test()
.then(function(data){
console.log(data);
});
}
});
angular.bootstrap(document,["app"]);
</script>
myApp.service('userService', [
'$http', '$q', '$rootScope', '$location', function($http, $q, $rootScope, $location) {
var user = {
access: false
};
var me = this;
this.initialized = false;
this.isAuthenticated = function() {
var deferred = $q.defer();
user = {
first_name: 'First',
last_name: 'Last',
email: 'email@address.com',
access: 'institution'
};
deferred.resolve(user);
me.initialized = true;
return deferred.promise;
};
}
]);
alors votre controller devrait s'aligner en conséquence:
myApp.run([
'$rootScope', 'userService', function($rootScope, userService) {
return userService.isAuthenticated().then(function(user) {
if (user) {
// You have access to the object you passed in the service, not to the response.
// You should either put response.data on the user or use a different property.
return $rootScope.$broadcast('login', user.email);
} else {
return userService.logout();
}
});
}
]);
quelques points à noter sur le service:
Exposer dans un service uniquement ce qui doit être exposé. L'utilisateur doit être gardé en interne et être accessible uniquement par getters.
lorsque vous utilisez des fonctions, utilisez ' me ' qui est le service pour éviter les cas extrêmes avec javascript.
je deviné ce initialisé était censé faire, n'hésitez pas à me corriger si j'ai deviné le mal.
pour retourner une promesse résolue, vous pouvez utiliser:
return $q.defer().resolve();
si vous avez besoin de résoudre quelque chose ou de retourner des données:
return $q.defer().resolve(function(){
var data;
return data;
});
Pour de plus courtes JavaScript utiliser ce Code:
myApp.service('userService', [
'$q', function($q) {
this.initialized = $q.when();
this.user = {
access: false
};
this.isAuthenticated = function() {
this.user = {
first_name: 'First',
last_name: 'Last',
email: 'email@address.com',
access: 'institution'
};
return this.initialized;
};
}
]);
Vous savez que vous perdez la liaison à userService.utilisateur en l'écrasant avec un nouvel objet au lieu de définir seulement les propriétés des objets?
voici ce que je veux dire comme exemple de mon plnkr.exemple de code co (exemple de travail): http://plnkr.co/edit/zXVcmRKT1TmiBCDL4GsC?p=preview):
angular.module('myApp', []).service('userService', [
'$http', '$q', '$rootScope', '$location', function ($http, $q, $rootScope, $location) {
this.initialized = $q.when(null);
this.user = {
access: false
};
this.isAuthenticated = function () {
this.user.first_name = 'First';
this.user.last_name = 'Last';
this.user.email = 'email@address.com';
this.user.access = 'institution';
return this.initialized;
};
}]);
angular.module('myApp').controller('myCtrl', ['$scope', 'userService', function ($scope, userService) {
$scope.user = userService.user;
$scope.callUserService = function () {
userService.isAuthenticated().then(function () {
$scope.thencalled = true;
});
};
}]);
essaye ceci:
myApp.service('userService', [
'$http', '$q', '$rootScope', '$location', function($http, $q, $rootScope, $location) {
var deferred= $q.defer();
this.user = {
access: false
};
try
{
this.isAuthenticated = function() {
this.user = {
first_name: 'First',
last_name: 'Last',
email: 'email@address.com',
access: 'institution'
};
deferred.resolve();
};
}
catch
{
deferred.reject();
}
return deferred.promise;
]);