This is the 11th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

The “then” function is just like a callback function and can be executed after the runAsync asynchronous task has completed. This is where Promise comes in. In simple terms, it separates the original callback from the original callback and chaining the callback after the asynchronous operation has completed.

You might be dismissive, but is that all a Promise can do? Why don’t I wrap the callback function and pass it to runAsync, like this:

Function runAsync(callback){setTimeout(function(){console.log(' complete '); Callback (' whatever data '); }, 2000); } runAsync(function(data){ console.log(data); });Copy the code

The effect is the same, but why bother using a Promise? So what happens when you have multiple layers of callbacks? What if the callback is also an asynchronous operation that requires a corresponding callback function after execution? You can’t define a callback2 and pass it to the callback. The advantage of a Promise is that you can continue to write the Promise object in the THEN method and return, and then continue to call the THEN for the callback.

So, on the face of it, a Promise is simply a way to simplify the writing of multiple callbacks, but in essence, a Promise is all about “state”, which is much simpler and more flexible than passing callbacks by maintaining state and passing state. So the right scenario to use a Promise looks like this:

runAsync1()
.then(function(data){
    console.log(data);
    return runAsync2();
})
.then(function(data){
    console.log(data);
    return runAsync3();
})
.then(function(data){
    console.log(data);
});
Copy the code

This outputs the contents of each async callback in sequence, every two seconds. The data passed to resolve in runAsync2 can be retrieved in the next then method. The running results are as follows:

Guess how runAsync1, runAsync2, and runAsync3 are defined? Yes, here it is (for longer code, please expand) :

 View Code
Copy the code

In the then method, you can also return the data instead of the Promise object, and receive the data in the later THEN. For example, let’s change the code above to look like this:

runAsync1() .then(function(data){ console.log(data); return runAsync2(); }) .then(function(data){ console.log(data); Return 'return data directly '; }).then(function(data){console.log(data); });Copy the code

The output will look like this:

At this point, you should have a basic idea of what a Promise is. So let’s take a look at what else ES6 Promise can do. We just said resolve, reject, what does it do? In fact, all of our previous examples have a “succeed” callback and no “fail”. Reject sets the Promise’s state to “Rejected” so we can catch it in then and execute the “fail” callback. Look at the code below.

function getNumber(){ var p = new Promise(function(resolve, SetTimeout (function(){var num = math.ceil (math.random ()*10); If (num<=5){resolve(num); } else{reject(' numbers are too big '); }}, 2000); }); return p; } getNumber() .then( function(data){ console.log('resolved'); console.log(data); }, function(reason, data){ console.log('rejected'); console.log(reason); });Copy the code