Shulou(Shulou.com)06/02 Report--

This article mainly explains "what is the asynchronous operation of Promise". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the asynchronous operation of Promise".

What is an asynchronous operation?

The so-called asynchronous operation refers to the operation that can be performed at the same time as the current program. For example:

$("# page") .scrolltop (0, 1000); / / use 1 second to scroll the page to the top

$("# nav-float"). Hide (1000); / / use 1 second to hide the floating navigation bar

As long as you have a little experience in asynchronous programming, you should know that these two methods will be done at the same time.

The order in which they are written does not affect the order of their execution.

/ / the characteristic of asynchronous operation is that it will not interrupt the execution of the current program.

/ / immediately after the getUsers request is made, the second request will be executed downwards.

Ajax ("/ getUsers", function (data) {

/ / the fallback function will be called after the request is successful.

})

/ / the resumelist request will start immediately, regardless of whether the getUsers ends or not

Ajax ("/ resumelist", function (data) {

})

As to which ajax returns the result first and executes the callback function, it is impossible to determine the order in which the code is written.

We can make a simple definition of asynchronous operation.

When an operation begins, the main program does not have to wait for it to complete and can continue to execute downwards. At this point, the operation can be performed simultaneously (concurrently) with the main program. This kind of operation is called asynchronous operation. Usually when the operation is completed, a callback function that we set up in advance will be executed for subsequent processing.

Our common asynchronous operations are as follows:

Add timer setTimeout/setInterval

Execute an animated animate

Initiate a network request request

What are the problems caused by asynchrony?

For example, we now have two animations that need to be executed sequentially, that is, the first ends before the second can start.

It may be a little troublesome at this time, and the traditional solution is through callback:

AnimateA (function () {

AnimateB ()

})

This scheme is obviously not very good. If there are many asynchronous operations that need to be performed sequentially, it will lead to the so-called "callback hell".

AjaxA (function () {

AjaxB (function () {

AjaxC (function () {

AjaxD (function () {

.

});

});

});

})

This kind of code is annoying whether it is written or read.

Let's take a look at what it looks like after being modified by Promise (pseudo code)

New Promise (ajaxA)

.then (ajaxB)

.then (ajaxC)

.then (ajaxD)

The use and principle of Promise

To be proficient in the use of Promise, you must first understand how it solves problems.

Post a piece of actual Promise code and feel it first:

NewPromise (resolve= > {

Ajax ("/ pay/post", data= > resolve ())

}) .then (resolve= > {

Ajax ("/ order/fix", data= > {

/ / processing data

})

})

The above code uses ES6's arrow function, although it greatly simplifies the way the code is written

But it is extremely unfriendly for junior programmers.

Reading this kind of code is almost like reading the Diamond Sutra.

We restore the code to what ES5 looks like.

New Promise (function (resolve) {

Ajax ("/ pay/post", function (data) {

Resolve ()

})

}) .then (function () {

Ajax ("/ order/fix", function (data) {

})

})

Next, we will follow Feynman's technique to learn step by step how Promise solves the problem.

Question 1, as an asynchronous function, especially a network request like ajax, even I can't determine the execution time of the function, how does Promise know when the first function ends? And then start the next one?

Promise is not that magical. It doesn't know when our function ends.

Did you notice line 3 in the code above?

When the callback is executed at the end of the ajax request

We called a resolve () function, and this code is very critical.

This is actually telling Promise that the current function is over.

You can start with the next one. At this point, Promise will execute the functions in then.

Question 2, so according to you, if I don't call this method, Promise doesn't know if the function ends, then the function in then will not be executed, which means my second request will never be sent?

Bingo!! Congratulations, you have learned logical reasoning + rush to answer.

Question 3, but where did this resolve function come from? Do I need to define it myself? From the code, it looks like a parameter, so who passed it into the function?

You need to understand the basic structure of Promise first.

New Promise (function 1). Then (function 2)

We passed both function 1 and function 2 as arguments to a Promise object

So then functions 1 and 2 are controlled by this Promise object.

Simply put, both function 1 and function 2 are executed by the Promise object.

So when function 1 executes, the parameters are of course passed in by the Promise object.

New Promise (function (resolve) {

/ / resolve is the parameter passed in by the Promise object when calling the function

}) .then (function 2)

Question 4: why did the Promise object pass in this resolve function when performing the first task, and for what purpose?

What do you say?

Crap, do I have to ask you if I know?

What a pig's brain. Didn't you just say that?

The Promise object has no way of knowing when our asynchronous function ends.

Then let me ask you, if you pick someone up at the station,

But you don't know when the other person will get off, what will you do?

Give him my phone number. Call me when you're almost there.

Yes, Promise takes the same approach to solving problems.

The resolve function it passes in is like a walkie-talkie.

When our asynchronous task is about to end, we notify the Promise object through the walkie-talkie.

That is, to call the resolve method

New Promise (function (resolve) {

Ajax ("/ pay/post", function (data) {

/ / when the request ends, the Promise object is notified by calling the resolve method that the task is completed

Resolve (); / / after receiving the notification, Promise will immediately start the execution of function 2.

})

}) .then (function 2)

I see, so this resolve function must be called at the end of the asynchronous task (for example, the callback method of ajax), which is equivalent to telling the Promise object that the task is over, please start the next one.

Absolutely right

Question 5, so Promise is no more than that, it doesn't revolutionize the functionality, because it can also be done using the traditional callback nesting approach. To put it bluntly, it is an improvement in the way of coding.

Basically, but the advances in coding and asynchronous programming ideas brought about by Promise are enormous.

Question 6, if I have three asynchronous tasks, ajaxA, ajaxB and ajaxC, and I want to execute them in the order of A, B and C, can I write like this?

New Promise (function (resolve) {

Ajax ("/ AAA", function () {

Resolve (); / / notify Promise that the task ends

})

}) .then (function (resolve) {

Ajax ("/ BBB", function () {

Resolve (); / / notify Promise that the task ends

})

}) .then (function () {

Ajax ("/ CCC", function () {/ /.... })

}) the above method of writing is incorrect.

The Chinese meaning of Promise is "commitment".

It means that each Pormise object represents a commitment.

And each commitment can only guarantee the order of one task, that is to say,

New Promise (A). Then (B); this sentence means that only the order of An and B can be guaranteed.

Once An is finished and B starts, this promise will be fulfilled and the Promise object will be invalidated.

What if there's a C? We have to be in function B.

Recreate a new Promise object to fulfill the next promise, written like this:

New Promise (function 1 (resolve) {

AjaxA ("xxxx", function () {

Resolve (); / / notify Promise that the task ends

})

}) .then (function 2 () {

/ / after function 2 starts to run, the Promise object created for the first time completes its mission and can no longer work.

/ / at this point, we created and returned a new Promise object

Return new Promise (function (resolve) {

AjaxB ("xxxx", function () {

Resolve (); / / notify the new Promise object that the task is over

})

})

}. Then (function 3 () {/ / although chained calls are used here, the one responsible for executing function 3 is already the new Promise object

/ / if we still have ajaxD to call sequentially

/ / then you have to re-new Promise the () object here.

AjaxC ("xxx", function () {})

})

Question 7, I see, is there any other powerful function of Promise?

Yes, for example: if I have three asynchronous tasks, ABC starts to execute at the same time

When all the three tasks of AMagol B and C are finished, execute Task D.

Traditional methods are complex to implement, and Promise is very simple, like this:

Promise.all ([new Promise (A), new Promise (B), new Promise (C)])

.then (function () {

D ()

});

Question 8, if I want any one of the tasks to be completed.

Start mission D right away. What should I do?

Promise.race ([new Promise (A), new Promise (B), new Promise (C)])

.then (function () {

D ()

}); thank you for reading. The above is the content of "what is the asynchronous operation of Promise". After the study of this article, I believe you have a deeper understanding of what the asynchronous operation of Promise is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.