Create Email Client with Webix

Summary:  The real problem with callbacks is that they rob us of the ability to use return and throw keywords. And Promise solves all this nicely

The real problem with callbacks is that they take away our ability to use return and throw keywords. And Promise solves all this nicely

Promise concept

The so-called Promise is an object provided natively by ES6 to deliver messages for asynchronous operations. It represents an event (usually an asynchronous operation) whose result will be known in the future, and which provides a unified API for further processing

Print console.dir(Promise) directly to see

At a glance, it is clear that Promise is a constructor. It has familiar methods such as all, reject, and resolve, and there are also familiar methods such as then and catch on the prototype. In this way, objects created with Promise new must have then and catch methods.

Promise Features

Promise objects have the following two characteristics

1. The state of the object is not affected by the outside world. A Promise object represents an asynchronous operation with three states: Pending (in progress), Resolved (completed, also known as Fulfilled), and Rejected (failed). Only the result of an asynchronous operation can determine the current state, and no other operation can change this state. This is also the origin of the name Promise, which means "promise" in English, which means that other means cannot be changed.

2. Once the state changes, it will not change again, and this result can be obtained at any time. There are only two possibilities for the state change of the Promise object: from Pending to Resolved and from Pending to Rejected. As long as these two situations occur, the state will be frozen and will not change again, and this result will always be maintained. Even if the change has occurred, you will get this result immediately if you add a callback function to the Promise object. This is completely different from an event. The characteristic of an event is that if you miss it and listen again, you will not get the result.

With the Promise object, asynchronous operations can be expressed in the process of synchronous operations, avoiding layers of nested callback functions. Additionally, Promise objects provide a uniform interface that makes it easier to control asynchronous operations.

Promises also have some drawbacks. First of all, Promise cannot be cancelled, it will be executed immediately once it is created, and cannot be cancelled midway. Secondly, if the callback function is not set, the error thrown inside the Promise will not be reflected to the outside. Third, when it is in the Pending state, it is impossible to know which stage it is currently in (just started or about to be completed)

Let's take a look at a new Promise:

var p = new Promise(function(resolve, reject){    
    setTimeout(function(){   //做一些异步操作
        console.log('执行完成');
        resolve('随便什么数据');
    }, 500);
});

The constructor of Promise receives one parameter, which is a function, and passes in two parameters: resolve and reject, which respectively represent the callback function after the successful execution of the asynchronous operation and the callback function after the asynchronous operation fails. In fact, it is not accurate to describe "success" and "failure" here. According to the standard, resolve is to set the state of Promise to fullfiled, and reject is to set the state of Promise to rejected. But at the beginning, we can understand this first, and then we will study the concept in detail.

In the above code, we perform an asynchronous operation, that is, setTimeout. After 2 seconds, the output is "execution complete", and the resolve method is called.

Running the code will output "execution complete" after 2 seconds. Notice! I just created a new object and didn't call it. The function we passed in has already been executed. This is a detail that needs to be paid attention to. So when we use Promise, we usually wrap it in a function, and run this function when needed, such as:

function runAsync(){
    var p = new Promise(function(resolve, reject){       
        setTimeout(function(){    //做一些异步操作
            console.log('执行完成');
            resolve('随便什么数据');
        }, 2000);
    });
    return p;            
}
runAsync()  

At the end of our wrapped function, the Promise object will be returned, that is, we get a Promise object by executing this function. Remember that there are then and catch methods on Promise objects? This is the power, look at the following code:

runAsync().then(function(data){
    console.log(data);
    //后面可以用传过来的数据做些其他操作
});

Call the then method directly on the return of runAsync(), then receives a parameter, which is a function, and will get the parameters we passed when calling resolve in runAsync. Running this code will output "execution complete" after 2 seconds, followed by "whatever data"

At this time, you should realize that the function in then is the same as our usual callback function, which can be executed after the asynchronous task of runAsync is completed. This is the role of Promise; in simple terms, it can separate the original callback writing method, and execute the callback function in a chain call after the asynchronous operation is completed.

Of course, if I encapsulate the callback function, is it the same to pass it to runAsync, like this:

function runAsync(callback){
    setTimeout(function(){
        console.log('执行完成');
        callback('随便什么数据');
    }, 2000);
}
runAsync(function(data){
    console.log(data);
});

So the question is, what should I do if there are multiple layers of callbacks? What if callback is also an asynchronous operation, and a corresponding callback function is required after execution? You can't define another callback2, and then pass it in to the callback. The advantage of Promise is that you can continue to write the Promise object in the then method and return, and then continue to call then to perform the callback operation

Original link