Example of $q service in angular

For understanding $Q Services

Reference: HTTP://WWW.ZOUYESHENG.COM/ANGULAR.HTML#TOC39

Generalized callback Management

Like other frameworks, Ng provides a generalized mechanism for asynchronous callback management. $http service is encapsulated on top of it. This mechanism is NG's $q service.

However, this mechanism of NG is generally relatively simple to achieve, according to the official saying, enough.

The method used is basically:

• Get a deferred instance by $q service
• Get a Promise object from the Promise property of the deferred instance
• The Promise object is responsible for defining the callback function
• Deferred instance responsible for triggering callbacks

var Testctrl = function ($q) {  var defer = $q. Defer ();  var promise = Defer.promise;  Promise.then (function (data) {Console.log (' OK, ' + data)},               function (data) {Console.log (' error, ' + Data}});  Defer.reject (' xx ');  Defer.resolve (' xx ');}

Understand the above things, and then see $q, Deferred, promise these three things.

11.2.1. $q

There are four ways to $q:

• $q. All () merges multiple promise to get a new promise
• $q. Defer () returns a deferred object
• $q. Reject () wraps an error so that the callback chain can be handled correctly
• $q. When () returns a Promise object

$q. The all () method is appropriate for concurrent scenarios:

var Testctrl = function ($q, $http) {  var p = $http. Get ('/json ', {params: {a:1}});  var P2 = $http. Get ('/json ', {params: {a:2}});  var all = $q. All ([P, p2]);  P.success (function (res) {Console.log (' here ')});  All.then (function (res) {Console.log (res[0])});

The $q. Reject () method is used when you catch an exception and then pass the exception in the callback chain:

To understand this, let's look at how promise's chain callbacks work, and see the difference between the following two sections:

var defer = $q. Defer (), var p = defer.promise;p.then (  function (data) {return ' xxx '});p. Then (  function (data) { Console.log (data)});d Efer.resolve (' 123 ');

var defer = $q. Defer (), var p = defer.promise;var P2 = P.then (  function (data) {return ' xxx '});p 2.then (  function ( Data) {Console.log (data)});d Efer.resolve (' 123 ');

From the model, the former is "concurrency", the latter is the "chain".

The function of $q. Reject () is to trigger the post-chain error callback:

var defer = $q. Defer (); var p = defer.promise;p.then (  function (data) {return data},  function (data) {return $ Q.reject (data)}). Then (  function (data) {Console.log (' OK, ' + data)},  function (data) {Console.log (' Error, ' + Data)}) Defer.reject (' 123 ');

The last $q. When () is to encapsulate the data into promise objects:

var p = $q. When (0, function (data) {return data},                   function (data) {return data});p. Then (  function (data) { Console.log (' OK, ' + data '},  function (data) {Console.log (' error, ' + Data ')});

11.2.2. Deferred

The deferred object has a property of two methods.

• The Promise property is the return of a Promise object.
• Resolve () Successful callback
• Reject () Failure callback

var defer = $q. Defer (), var promise = Defer.promise;promise.then (function (data) {Console.log (' OK, ' + data}},             function (data) {Console.log (' error, ' + data} '),//defer.reject (' xx ');d efer.resolve (' xx ');

11.2.3. Promise

The Promise object has only then () a method, registers a successful callback function and a failed callback function, and returns a Promise object for chained invocation.

Here is an example of your own writing

  varMyApp = Angular.module (' MyApp ',[]); Myapp.controller (' Listctrl ', [' $scope ', ' $http ', ' $q ',function($scope, $http, $q) {$scope. Name= ' Hello '; functionDemo () {varDeferred =$q. Defer (); //abbreviated version$http. Get (' Data.json '). Success (function(data,status,headers) {deferred.resolve (data); }). Error (function(data) {varReason =data;      Deferred.reject (reason); })      returndeferred.promise; }    //triggering the success of premiseDemo (). Then (function(data) {$scope. List=data; })  }])

Demo

Example of $q service in angular