Deep understanding of JavaScript asynchronous __javascript

PrefaceHttps://github.com/wangfupeng1988/js-async-tutorial

The fall of 2014 wrote "Deep understanding of JavaScript prototypes and closures series," has helped a lot of people out of JS prototype, scope, closure of the puzzle, still can be frequently praised messages.

Early on I summed up the concept of JS three mountain (although not everywhere), the first two (prototype, scope) has been basically understood, and the third (asynchronous) should also make a summary.

So, in the early spring of 2017, I spent about a week of spare time to do a complete summary of JS asynchronous, and fellow students to encourage a total progress. Directory

Part1 Basic Part what is asynchronous asynchronous and Event-loop event bindings are not counted asynchronously.

Part2 jquery Solution jQuery-1.5 Ajax jquery deferred jquery promise

Part3 es6-promise Promise Add ES6 standard Promise in the specific application of ES6 to mark the promise/a+ specification Promise really replace callback? Use Q.js Library

The specific application of generator iterator traversal generator in part4 generator ES6 Thunk function generator and asynchronous operation KOA the nature of generator generator. Does it replace the callback

Part5 async-await ES7 introduced async-await how to use Nodejs in v6.x version

PART6 Summary Summary of running program instructions

Require local node to be in V6 or above, and then execute the following command to download the code and install the dependent plug-ins

$ cd ~
$ git clone git@github.com:wangfupeng1988/js-async-tutorial.git
$ cd js-async-tutorial
$ npm I

Finally, local may need to start a static server to run the page, I use the Http-server plugin

$ NPM Install http-server-g
$ cd js-async-tutorial
$ http-server-p 8881

Then the browser can access http://localhost:8881/xxx/xxx.html

It is believed that front-end small partners, often using Ajax, encounter the dilemma that an interface parameter will need to be acquired using another interface.

The young front end may be synchronized (laughs), because I've done it, but it's extremely impacting performance and the user experience.

The normal front end will write the interface in the callback of the other interface. This is good, but it increases the nesting depth of the function and can cause some logical confusion.

Perhaps a friend will say, there are so many problems, to solve the problem is not good.

However, if you need to return data for several other interfaces. This time it will compare the egg pain. This is the callback to hell.

At that time vaguely remember is using jquery when the then method to solve.

Until he met promise, it was a perfect and graceful solution to the problem of callback hell.

Create a promise instance to get the data. and pass the data to the processing function resolve and reject.
It should be noted that promise was executed at the time of the Declaration. var getuserinfo=new Promise (function (resolve,reject) {$.ajax ({type: "Get", url: "Index.aspx", s Uccess:function (data) {if (data). status== "1") {Resolve (data. Resultjson)//Calls}else{reject (data) when the asynchronous operation succeeds.
ERRMSG);//Calling}} when an asynchronous operation fails; })//Another Ajax Promise object, var getdatalist=new Promise (function (resolve,reject) {$.ajax ({type: "get", url : "Index.aspx", success:function (data) {if (data). status== "1") {Resolve (data. Resultjson)//Calls}else{reject (data) when the asynchronous operation succeeds.
ERRMSG);//Calling}} when an asynchronous operation fails; //promise method Then,catch Method Getuserinfo.then (function (Resultjson) {//through the fetched data render page}). catch (function (errmsg) {//Get Data Processing logic on Failure})//promise the All method, and all Promise objects in the array complete the execution of Promise.all ([Getuserinfo,getdatalist]). Then ([ Resultjson1,reSultJson2] {//Here write the business logic that all two Ajax have successfully returned data before executing) 

This kind of code division is very clear, Ajax is to take the data,. Then. The catch method is to handle business logic, and the code is unusually clear.

Anyway I used a few times after it is inseparable from it, very good very strong.

If you want to learn it too. Refer to the chapter on promise in the introductory book ECMAScript 6.

I Baidu a lot of promise articles, think Ruan one peak great God is to explain it the most clear and understandable one.