The role and usage of await/async in JavaScript _javascript skills

Await/async is one of the most important features of ES7, it is the best asynchronous solution for JS so far. Although not entered in the ES2016, but soon arrived, is now in Es-next Stage 4 phase.

Direct examples, such as we need to get in order: Product data => user Data => comment data

Old friend Ajax

The traditional writing, no need to explain

Get Product Data
Ajax (' Products.json ', (products) => {
console.log (' ajax/products >>> ', Json.parse ( Products));
Get User Data
Ajax (' Users.json ', (users) => {
console.log (' ajax/users >>> ', Json.parse (users));
Get Comment Data
Ajax (' Products.json ', (comments) => {
console.log (' ajax/comments >>> ', Json.parse ( Comments));});

Not a new friend, Promise.

Promise has been mentioned for a long time and is also a part of ES6. Promise can eliminate the pyramid of doom and gloom brought by callback hell, which is clearer than the code.

Promise
//encapsulates Ajax, returns a Promise
function requestp (URL) {return
new Promise (function (resolve, reject) { C4/>ajax (URL, (response) => {
Resolve (Json.parse (response));}
)
;} Get Product data
REQUESTP (' Products.json '). Then (function (products) {
console.log (' Promises/products >> > ', Products ';
});
Gets the user data
requestp (' Users.json '). Then (function (users) {
console.log (' Promises/users >>> ', users );
});
Get Comment Data
requestp (' Comments.json '). Then (function (comments) {
console.log (' Promises/comments >> > ', comments);
};

Of course, using Promise.all can be more concise

Promise.all ([
requestp (' Products.json '),
requestp (' Users.json '),
requestp (' Comments.json ')
])
. Then (function (data) {
Console.log (' Parallel promises >>> ', data;
});

A strong new friend generators

Generators is also ES6 a new feature that can suspend/execute code. Yield represents a pause, Iterator.next indicates that the next step, if you do not understand generators is okay, you can ignore it directly to learn Await/async.

Generators
function request (URL) {
ajax (URL, (response) => {
Iterator.next (json.parse (response));
} );
}
function *main () {
//Fetch product data let data
= Yield request (' Products.json ');
Get user Data let
users = Yield request (' Users.json ');
Get Comment data let products
= Yield request (' Comments.json ');
Console.log (' generator/products >>> ', products);
Console.log (' Generator/users >>> ', users);
Console.log (' generator/comments >>> ', comments);
}
var iterator = main ();

Fort's friend Await/async.

Used in conjunction with Promise

Encapsulates Ajax, returns a Promise
function requestp (URL) {return
new Promise (function (resolve, reject) {
Ajax (URL, Response) => {
Resolve (Json.parse (response));
});} (Async () => {
//access to product data let:
await REQUESTP (' Products.json ');
Get user Data let
users = await requestp (' Users.json ');
Get comment Data let's products
= await requestp (' Comments.json ');
Console.log (' ES7 async/products >>> ', products);
Console.log (' ES7 async/users >>> ', users);
Console.log (' ES7 async/comments >>> ', comments);
} ());

Used in conjunction with the Fetch API:

(Async () => {
//async/await using the fetch API
try {
//Get product data let's products
= await fetch. JSON ');
Parsing products let
parsedproducts = await Products.json ();
Get user Data let
users = await fetch (' Users.json ');
Parsing users let
parsedusers = await Users.json ();
Get comment Data let
comments = await fetch (' Comments.json ');
Parsing comments Let
parsedcomments = await Comments.json ();
Console.log (' ES7 async+fetch/products >>> ', parsedproducts);
Console.log (' ES7 async+fetch/users >>> ', parsedusers);
Console.log (' ES7 async+fetch/comments >>> ', parsedcomments);
} catch (Error) {
console.log (error);
}
} ());

Execute in Array order

(Async () => {let
paralleldata = await* [
requestp (' Products.json '),
requestp (
' Users.json '), REQUESTP (' Comments.json ')
];
Console.log (' Async parallel >>> ', paralleldata);
} ());

Combine Fetch again

(Async () => {let
paralleldatafetch = await* [
await fetch (' Products.json ')]. JSON (),
(await fetch (' Users.json ')). JSON (),
(await fetch (' Comments.json ')). JSON ()
];
Console.log (' Async parallel+fetch >>> ', paralleldatafetch);
} ());

Using Await/async to solve asynchronous code with synchronized thinking, it feels really cool and fun! About JS in the role and usage of await/async to introduce so much, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!