await in JavaScript/The role and usage of async

await/async is ES7 One of the most important features, it is currently the best asynchronous solution for JavaScript. Although it is not in ES2016 The data entry has arrived quickly, and it is now already in ES-Next Stage 4 Stage.

Let's take an example, for example, if we need to get data in order: product data => user data => comment data

Old friend Ajax

The traditional way of writing, no need to explain

// Obtaining product data
ajax('products.json', (products) => {
console.log('AJAX/products >>>', JSON.parse(products));
// Obtaining user data
ajax('users.json', (users) => {
console.log('AJAX/users >>>', JSON.parse(users));
// Obtaining 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 part of ES6 is part of. Promise can eliminate the misfortune of callback hell, making the code clearer.

// Promise
// Encapsulate Ajax, return a Promise
function requestP(url) {
return new Promise(function(resolve, reject) {
ajax(url, (response) => {
resolve(JSON.parse(response));
});
});
}
// Obtaining product data
requestP('products.json').then(function(products){
console.log('Promises/products >>>', products);
});
// Obtaining user data
requestP('users.json').then(function(users){
console.log('Promises/users >>>', users);
});
// Obtaining comment data
requestP('comments.json').then(function(comments){
console.log('Promises/comments >>>', comments);
});

Of course, usePromise.all It 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 are also part of ES6 A new feature that can pause/Execute code. yield indicates pause, iterator.next indicates the next step of execution. If you are not familiar with Generators, it is fine to ignore it and directly learn await/async.

// Generators
function request(url) {
ajax(url, (response) => {
iterator.next(JSON.parse(response));
});
}
function *main() {
// Obtaining product data
let data = yield request('products.json');
// Obtaining user data
let users = yield request('users.json');
// Obtaining 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();
iterator.next(); 

Fantastic friend await/async

Combined with Promise

// Encapsulate Ajax, return a Promise
function requestP(url) {
return new Promise(function(resolve, reject) {
ajax(url, (response) => {
resolve(JSON.parse(response));
});
});
}
(async () => {
// Obtaining product data
let data = await requestP('products.json');
// Obtaining user data
let users = await requestP('users.json');
// Obtaining comment data
let products = await requestP('comments.json');
console.log('ES7 Async/products >>>', products);
console.log('ES7 Async/users >>>', users);
console.log('ES7 Async/comments >>>', comments);
});

Using Fetch API in conjunction with:

(async () => {
// Async/await using the fetch API
try {
// Obtaining product data
let products = await fetch('products.json');
// Parsing products
let parsedProducts = await products.json();
// Obtaining user data
let users = await fetch('users.json');
// Parsing users
let parsedUsers = await users.json();
// Obtaining 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);
});

Again combined with Fetch

(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/Solve asynchronous code with synchronous thinking, it feels very cool and pleasant! About await in JavaScript/That's all about the usage and application of async, I hope it helps you. If you have any questions, please leave a message, and the editor will reply to you in time. Also, I would like to express my sincere gratitude to all the supporters of the Yelling Tutorial website!