javascript - tutorial - promesas en angular 6
¿Cómo devolver una promesa resuelta de un servicio AngularJS usando $ q? (7)
Mi servicio es:
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 protected]'',
access: ''institution''
};
return deferred.resolve();
};
}
]);
Estoy llamando a esto en mi archivo de config través de:
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();
}
});
}
]);
Sin embargo, se queja de que then no es una función. ¿No estoy devolviendo la promesa resuelta?
Cómo devolver simplemente una promesa pre-resuelta en Angular
Se resuelve la promesa:
return $q.when( someValue ); // angular 1.2+
return $q.resolve( someValue ); // angular 1.4+, alias to `when` to match ES6
Promesa rechazada:
return $q.reject( someValue );
Aquí está el código correcto para su servicio:
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 protected]'',
access: ''institution''
};
deferred.resolve(user);
me.initialized = true;
return deferred.promise;
};
}
]);
Entonces tu controlador debería alinearse en consecuencia:
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();
}
});
}
]);
Algunos puntos a tener en cuenta sobre el servicio:
Exponer en un servicio solo lo que necesita ser expuesto. El usuario debe mantenerse internamente y solo los usuarios deben acceder a él.
Cuando esté en funciones, use ''yo'', que es el servicio para evitar los casos de borde con javascript.
Supuse lo que se suponía que hiciera la inicialización, siéntase libre de corregirme si adivino mal.
De su método de servicio:
function serviceMethod() {
return $timeout(function() {
return {
property: ''value''
};
}, 1000);
}
Y en tu mando:
serviceName
.serviceMethod()
.then(function(data){
//handle the success condition here
var x = data.property
});
Devuelve tu promesa, devuelve aplazado.
Es la API de promesa que tiene el método ''entonces''.
https://docs.angularjs.org/api/ng/service/$q
La resolución de llamadas no devuelve una promesa, solo señala la promesa de que la promesa se resuelve para que pueda ejecutar la lógica ''entonces''.
Patrón básico como sigue, enjuague y repita
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>
Para código JavaScript más corto, usa esto:
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 protected]'',
access: ''institution''
};
return this.initialized;
};
}
]);
¿Sabe que perdió el enlace con userService.user sobrescribiéndolo con un nuevo objeto en lugar de establecer solo las propiedades de los objetos?
Esto es lo que quiero decir como un ejemplo de mi código de ejemplo plnkr.co (ejemplo de trabajo: 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 protected]'';
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;
});
};
}]);
Para devolver una promesa resuelta, puedes usar:
return $q.defer().resolve();
Si necesita resolver algo o devolver datos:
return $q.defer().resolve(function(){
var data;
return data;
});
Prueba esto:
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 protected]'',
access: ''institution''
};
deferred.resolve();
};
}
catch
{
deferred.reject();
}
return deferred.promise;
]);