Explication détaillée de la fonction et de l'utilisation de wait/async en JavaScript

Le rôle et l'utilisation de wait/async en JavaScript

Partager :

await/ async est l'une des fonctionnalités les plus importantes d'ES7. C'est de loin la meilleure solution asynchrone pour JS. Bien qu'il n'ait pas été inclus dans ES2016, il arrivera bientôt et est actuellement au stade ES-NextStage4.

Passons directement à l'exemple. Par exemple, nous devons obtenir dans l'ordre : données produit => données utilisateur => données d'avis

Vieil ami Ajax

Écriture traditionnelle, aucune explication requise

// 获取产品数据
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));
        });
    });
});

Pas un nouvel ami Promesse

La promesse est mentionnée depuis longtemps et fait également partie de l'ES6. Promise peut éliminer la pyramide du malheur provoquée par l'enfer des rappels, rendant le code plus clair.

// 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('Promises/products >>>', products);
});
// 获取用户数据
requestP('users.json').then(function(users){
    console.log('Promises/users >>>', users);
});
// 获取评论数据
requestP('comments.json').then(function(comments){
    console.log('Promises/comments >>>', comments);
});

Bien sûr, utiliser Promise.all peut être plus concis

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

De puissants générateurs de nouveaux amis

Les générateurs sont également une nouvelle fonctionnalité d'ES6, qui peut mettre en pause/exécuter du code . Yield signifie faire une pause, et iterator.next signifie exécuter l'étape suivante. Peu importe si vous ne comprenez pas les générateurs, vous pouvez l'ignorer et apprendre directement wait/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();
碉堡的朋友 await/async
与 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);
}());

Utilisé en combinaison avec l'API Fetch :

(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);
    }
}());

Exécuter dans l'ordre du tableau

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

Combiné à nouveau avec 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);
}());

Utilisez wait/async pour penser de manière synchrone Résoudre du code asynchrone est très cool et excitant !

Tutoriel recommandé : "Tutoriel de base js"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!