When using JQuery, I knew that promise is a mode of Js asynchronous programming mode, but I didn't understand the difference between it and JQuery's deferred object. As the company's project progresses, we have to receive data from the backend, so we decided to get it done.
Promise
Promise is a mode that operates asynchronous events in the form of synchronous operations, avoiding layer by layer of nesting, and can operate asynchronous events in chains.
We know that when writing JavaScript asynchronous code, callback is the easiest mechanism, but if you use this mechanism, you must sacrifice control flow, exception handling and function semantics, and even let us fall into a callback pit, and promise solves this problem.
In ES6, the built-in AngularJS built-in Q in Promise, angularJS, and when they use Promises/A specifications, as follows:
Each task has three states: pending, fulfilled, and failed.
1.pending state: You can transition to fulfillment or rejection state.
2.fulfilled state: cannot be changed to any other state, and the state cannot be changed, and there must be a value value.
3.rejected state: It cannot be changed to any other state, and the state cannot be changed, there must be a reason.
The transfer of state is one-time. Once the state becomes fulfilled (completed) or failed (failed/rejected), it cannot change any more.
The code copy is as follows:
function okToGreet(name){
return name === 'Robin Hood';
}
function asyncGreet(name) {
var deferred = $q.defer();
setTimeout(function() {
// Because this asynchronous function fn is executed in the future asynchronously, we wrap the code into the $apply call, while correctly observing the change in the model
$scope.$apply(function() {
deferred.notify('About to greet ' + name + '.');
if (okToGreet(name)) {
deferred.resolve('Hello, ' + name + '!');
} else {
deferred.reject('Greeting ' + name + ' is not allowed.');
}
});
}, 1000);
return deferred.promise;
}
var promise = asyncGreet('Robin Hood');
promise.then(function(greeting) {
alert('Success: ' + greeting);
}, function(reason) {
alert('Failed: ' + reason);
}, function(update) {
alert('Got notification: ' + update);
});
Basic usage of Q Promise
The above code shows the role of several methods of deffered instances built by $q.defer(). If the asynchronous operation is successful, the state of the Promise object is changed to "success" (i.e., from pending to resolved); if the asynchronous operation is failed, the state is changed to "failed" (i.e., from pending to rejected). Finally, return deferred.promise and we can chain call the then method.
JS will have native Promise, there are already Promise objects in ES6, and the basic Promise API is implemented in firefox and Chrome 32 beta versions.
$q.defferd in AngularJs
Return the deffered object to be called chained by calling $q.defferd. This object associates the three task states in the Promises/A specification through the API.
Deffered API
Method of deffered object
1.resolve(value): At the declaration resolve(), it indicates that the promise object changes from the pending state to resolve.
2.reject(reason): At the declaration resolve(), it indicates that the promise object changes from the pending state to rejected.
3.notify(value): At the declaration notify(), it indicates that the unfulfilled state of the promise object can be called multiple times before resolving or rejecting.
deffered object properties
promise: The last thing that returns is a new deferred object promise property, not the original deferred object. This new Promise object can only observe the status of the original Promise object, and cannot modify the internal state of the deferred object, which can prevent the task state from being modified externally.
Promise API
When creating a deferred instance, a new promise object is created and the reference can be obtained through deferred.promise.
The purpose of the promise object is to allow the interested part to obtain its execution results when the deferred task is completed.
Methods of promise objects
1.then(errorHandler, fulfilledHandler, progressHandler): the then method is used to listen for different states of a Promise. The errorHandler listens to failed state, the fulfilledHandler listens to fulfilled state, and the progressHandler listens to unfulfilled state. Additionally, the notify callback may be called 0 to multiple times, providing a progress indication before resolving or rejecting (resolving and rejecting).
2.catch(errorCallback) - shortcut to promise.then(null, errorCallback)
3. finally(callback) - allows you to observe whether a promise is executed or rejected, but you do not need to modify the last value. This can be used to free resources or clean up useless objects, regardless of whether the promise is rejected or resolved. For more information, please refer to the full documentation specification.
Promise chain call can be implemented through the then() method.
The code copy is as follows:
promiseB = promiseA.then(function(result) {
return result + 1;
});
// promiseB will be processed immediately after processing promiseA,
// and its value value is the result of promiseA increasing by 1
Other methods of $q
$q.when(value): Pass the variable value, promise.then() executes a successful callback
$q.all(promises): Multiple promises must be executed successfully before they can be executed successfully. The value is passed as an array or hash value. Each value in the array is the promise object corresponding to the Index.