Cómo entender el servicio $ q de Angular JS

Angular – Principios básicos de las promesas (servicio $ q por $ http)

Promesas

$ HTTP

ANGULAR

$ Q

Promesas angulares

Mientras usa Angular y generalmente cuando usa JavaScript en un proyecto de tamaño medio, se encontrará con muchas funciones de devolución de llamada y / o llamadas asincrónicas para recuperar datos del back-end.
Para mantener las cosas tranquilas, las promesas vienen a nuestro rescate.

En este protip, proporcionaré un esqueleto básico para comenzar con el servicio angular $ q para que sepa cómo abordar las promesas.

Características que se muestran en este protip:

– prometen infraestructura básica
– uso de promesa básica con $ http
– escenario avanzado usando promesas con $ http

Introducción de promesa

1) Crear objeto diferido

El objeto diferido controla el estado de la promesa. Podemos activar tres resoluciones: resolver, rechazar y notificar. En los siguientes pasos veremos cómo se relaciona con la configuración de la promesa.

Así es como se crea un objeto diferido:

var diferido = $ q.defer ();

2) Promesa de configuración

Para usar el objeto diferido, necesitamos configurar los controladores de promesa antes. Este será el código ejecutado para cada situación. Los escenarios son: notificación de éxito, fracaso y progreso. El objeto de promesa es una propiedad del objeto diferido.

promesa de var = promesa diferida;

//versión básica
promesa.entonces (fnSuccess)
.catch (fnFailure) // opcional
.finally (fnAlways) // opcional

// versión avanzada
promise.then (fnSuccess, fnFailure, fnNotification)
.catch (fnFailure) // opcional
.finally (fnAlways) // opcional

3) resolución diferida

Una vez que hemos creado el objeto diferido y configurado la promesa, podemos ejecutar nuestro procesamiento asincrónico y activar la promesa con la resolución final.

deferred.resolve (resultObj); // desencadena fnSuccess
deferred.reject (reasonObj); // desencadena fnFailure
deferred.notify (progressObj); // desencadena fnNotification

Uso básico de la promesa $ http

Este ejemplo utiliza una promesa devuelta por una llamada get $ http.

$ http.get (‘movies.json’)
.then (función (respuesta) {
$ scope.movies = response.data;
})
.catch (función (respuesta) {
console.log (response.status);
});

saqueador

Uso avanzado de la promesa $ http

Este ejemplo usa promesas para manejar llamadas $ http detrás de un Servicio. Posteriormente se puede agregar un manejo más complejo al Servicio.

app.factory (“Películas”, función ($ http, $ q) {
regreso {
get: function () {
var diferido = $ q.defer ();
$ http.get (‘movies.json’)
.then (función (respuesta) {
deferred.resolve (response.data);
})
.catch (función (respuesta) {
deferred.reject (respuesta);
});
retorno diferido.promise;
}
}
})

app.controller (“MoviesCtrl”, función ($ scope, Movies) {
Movies.get (). Then (function (data) {
$ scope.movies = datos;
})
.catch (función (respuesta) {
console.log (response.status);
});
})

saqueador

Recursos

El servicio angular $ q está inspirado en la biblioteca q.

$ q service, $ http service

En lugar de dar un salto en el servicio $ q, debe saber qué es lo que promete y por qué lo necesitamos.

¿Qué es la promesa?

La promesa en el mundo angular es una garantía de que obtendremos el resultado de la acción.

Hay dos posibles resultados de promesa:

  1. Resolver : se dice que la promesa se cumple si obtenemos resultados de la acción (no importa si el resultado es exitoso o fallido)
  2. Rechazar : se dice que la promesa se rechaza si no llamamos a la acción debido a un error del servidor.

¿Por qué necesitamos promesas?

Supongamos que queremos obtener noticias de la API de terceros y mostrarlas en nuestro sitio web, tendremos que esperar la respuesta de la API de noticias. Una vez que obtenga la respuesta de la API de noticias, crearemos más código en la función de llamada.

Si no se recibió la respuesta, se muestra un mensaje de error al usuario.

Aquí el servicio $ q viene en la imagen.

Usando el servicio angular de $ q para hacer frente a las promesas.

Angular JS proporciona un servicio llamado $ q que le permite trabajar con funciones asíncronas y usar sus valores de retorno cuando se haya completado la ejecución, y lo que es realmente genial es que también le permitirá escribir sus promesas personalizadas (para que puede resolver o rechazar una promesa cuando sea apropiado).

Aquí está el ejemplo:

var diferido = $ q.defer ();

Al crear un diferido, su estado está pendiente y no tiene ningún resultado.

Para cambiar al estado de diferido para resolver, debe hacer el siguiente código

deferred.resolve (datos);

Para cambiar al estado de diferido para rechazar, debe hacer el siguiente código

deferred.reject (datos);

Cuando resolve() o reject() lo diferido, cambia su estado a resuelto o rechazado

Finalmente regrese diferido.

El deferred.promise permite una función asincrónica para evitar que otro código interfiera con el progreso o el estado de su solicitud interna.

Aquí está el código de muestra para ello.

app.factory (“LoginService”, función ($ http, $ q) {
this.forgotPassword = function () {
var diferido = $ q.defer ();
$ http.get (BASE_URL)
.then (función (respuesta) {
deferred.resolve (respuesta);
},
función (errResponse) {
deferred.reject (errResponse);
});
retorno diferido.promise;
});

Finalmente realice los siguientes cambios en el controlador.

app.controller (“LoginController”, función ($ scope, $ q, LoginService) {
LoginService.forgotPassword ()
.luego(
función (resultado) {
// promesa se cumplió (independientemente del resultado)
// las comprobaciones de información se realizarán aquí
$ scope.data = resultado;
},
función (error) {
// maneja los errores aquí
console.log (error.statusText);
}
);
});

$ q library es un ployfill para la implementación de promesas cuando las promesas no eran compatibles de forma nativa con los navegadores, por lo que si desea comprender $ q, debe comprender cómo funciona ‘Promise’.

Aquí hay algunos recursos brillantes que lo ayudarán a comprender Promise:

  • La promesa de una fiesta de hamburguesas
  • Domine la entrevista de JavaScript: ¿Qué es una promesa?
  • Una guía rápida de las promesas de JavaScript
  • Promesas JavaScript 101
  • http://ponyfoo.com/articles/es6-…