Promise---$q service in AngularJS

Source: Internet
Author: User

What is promise

There are many asynchronous implementations in JavaScript, delay functions, callback functions, and ES6 new generator functions, where promise is also one of the ways to implement Asynchrony.
About the asynchronous implementation of JavaScript in detail and the difference, the post-update blog, please look forward to, no longer repeat here.

$Q Services

In short $q service is a promise implementation of ANGULARJS in its own package implementation. Let's introduce some common methods of $q:

    • Defer () Creates an deferred object that can perform several common methods, such as resolve,reject,notify, etc.
    • All () An array of incoming promise, executed in bulk, returning a Promise object
    • When () passes in an indeterminate parameter and returns a Promise object if it conforms to the promise standard.
需要注意的是在Promise中,定义了三种状态:等待状态,完成状态,拒绝状态。关于状态有两个规定:1.状态的变更是不可逆的2.等待状态可以变成完成或者拒绝
Defer () method

In $q, you can use the Resolve method to become a completion state, and use the Reject method to become a deny state.
where defer () is used to create a deferred object, Defer.promise is used to return a Promise object to define the then method. Then there are three parameters, namely the success callback, the failure callback, and the state change callback.
Let's look at an example of a company project:

' Use strict '; Angular.module (' app '). Controller (' Positionctrl ', [' $scope ',' $state ',' $q ',' $stateParams ',' $http ',function ($scope, $state, $q, $stateParams, $http) {var vm =This Vm.position; Vm.company; Vm.islogin =FalsefunctionGetPosition () {var def = $q. Defer (); $http. Get ('/data/position.json?id = ' + $stateParams. id). Then (function (RESP) {vm.position = Resp.data;Console.log (Resp.data);Console.log (vm.position); Def.resolve (RESP); }). catch (function (return def.promise;}; function getCompany (id) {$http. Get (function (resp) {Vm.company = Resp.data; //Console.log (Vm.company);}) . catch (function (err) {console.log (ERR); }); }; GetPosition (). Then (function ( obj) {getcompany (Obj.companyid);}); }]); 

The above code business logic is actually very simple, first to obtain the company position vm.position, according to the position information CompanyID to obtain the company Vm.company.
In the first function getposition, first call the $q.defer () method to get a deferred object. return def.promise; The statement clearly causes the function getPosition to return a promise object so that the. Then () method can be used directly after calling the getPosition () function.

 getPosition().then(function (obj) {            getCompany(obj.companyId);        });

This makes the synchronous execution of the two functions, which becomes asynchronous execution.

All () method

This all () method can combine multiple primise arrays into one. When all promise executes successfully, the subsequent callback is executed. The parameters in the callback are the results of each promise execution.
You can use this method when you execute certain methods in bulk.

 var Funca =function (var def = $q. Defer (); console.log ( "Funca"); //some code return def.promise;} var FUNCB = function (var def = $q. Defer (); console.log ( "Funca"); //some code return def.promise;} $q. All ([Funca (), FUNCB ()]). Then (function (result) {console.log (result);});       


Da Chuang
Links: https://www.jianshu.com/p/5dc90b5e62c2
Source: Pinterest
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.

Promise---$q service in AngularJS

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.