Funzione e uso di await/async in JavaScript

await/async è una delle caratteristiche più importanti di ES7, è la soluzione asincrona migliore che JS ha finora. Nonostante non sia stato registrato in ES2016, arriverà presto, attualmente è già in ES-Next Fase 4.

Andiamo direttamente all'esempio, ad esempio, se abbiamo bisogno di ottenere in sequenza: dati dei prodotti => dati degli utenti => dati dei commenti

Un vecchio amico Ajax

La scrittura tradizionale, non richiede spiegazione

// 获取产品数据
ajax('products.json', (products) => {
console.log('AJAX/products >>>', JSON.parse(products));
// 获取用户数据
ajax('users.json', (users) => {
console.log('AJAX/users >>>', JSON.parse(users));
// 获取评论数据
ajax('products.json', (comments) => {
console.log('AJAX/comments >>>', JSON.parse(comments));
});
});
});

Non è un nuovo amico Promise

Promise è stato menzionato da molto tempo e fa parte di ES6. Promise può eliminare la piramide di inferno di callback, rendendo il codice più chiaro.

// Promise
// 封装 Ajax，返回一个 Promise
function requestP(url) {
return new Promise(function(resolve, reject) {
ajax(url, (response) => {
resolve(JSON.parse(response));
});
});
}
// 获取产品数据
requestP('products.json').then(function(products){
console.log('Promesse/products >>>', products);
});
// 获取用户数据
requestP('users.json').then(function(users){
console.log('Promesse/users >>>', users);
});
// 获取评论数据
requestP('comments.json').then(function(comments){
console.log('Promesse/comments >>>', comments);
});

ovviamente utilizzarePromise.all può essere più conciso

Promise.all([
requestP('products.json'),
requestP('users.json'),
requestP('comments.json');
]
.then(function(data) {
console.log('Promesse parallele >>>', data);
});

Nuovo amico forte Generators

Generators è una nuova caratteristica di ES6 che può sospendere/eseguire codice. yield significa sospendere, iterator.next significa eseguire il passo successivo, se non conosci Generators, non c'è problema, puoi ignorarlo e imparare direttamente await/async.

// Generators
function request(url) {
ajax(url, (response) => {
iterator.next(JSON.parse(response));
});
}
function *main() {
// 获取产品数据
let data = yield request('products.json');
// 获取用户数据
let users = yield request('users.json');
// 获取评论数据
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(); 

Muro di fortificazione degli amici await/async

Utilizzando Promise

// 封装 Ajax，返回一个 Promise
function requestP(url) {
return new Promise(function(resolve, reject) {
ajax(url, (response) => {
resolve(JSON.parse(response));
});
});
}
(async () => {
// 获取产品数据
let data = await requestP('products.json');
// 获取用户数据
let users = await requestP('users.json');
// 获取评论数据
let products = await requestP('comments.json');
console.log('ES7 Async/products >>>', products);
console.log('ES7 Async/users >>>', users);
console.log('ES7 Async/comments >>>', comments);
});

Utilizzando Fetch API:

(async () => {
// Async/await using the fetch API
try {
// 获取产品数据
let products = await fetch('products.json');
// Parsing products
let parsedProducts = await products.json();
// 获取用户数据
let users = await fetch('users.json');
// Parsing users
let parsedUsers = await users.json();
// 获取评论数据
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);
}
});

Esegui in ordine di array

(async () => {
let parallelData = await* [
requestP('products.json'),
requestP('users.json'),
requestP('comments.json');
];
console.log('Async parallel >>>', parallelData);
});

Di nuovo in combinazione con 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);
});

Usare await/async per risolvere il codice asincrono con la mente sincrona, sembra molto divertente e piacevole! Ho introdotto così tanto sull'uso e la funzione di await/async in JavaScript, spero che sia utile a tutti. Se avete qualsiasi domanda, lasciate un commento e il moderatore risponderà tempestivamente. In questo senso, ringrazio anche tutti i sostenitori del sito tutorial Yell!