Ausführliche Erläuterung der Funktion und Verwendung vonawait/async in JavaScript

Die Rolle und Verwendung von „await/async“ in JavaScript

Teilen:

await/ Async ist eine der wichtigsten Funktionen von ES7. Es ist mit Abstand die beste asynchrone Lösung für JS. Obwohl es noch nicht in ES2016 enthalten ist, wird es bald verfügbar sein und befindet sich derzeit im ES-NextStage4-Stadium.

Gehen wir direkt zum Beispiel über: Produktdaten => Benutzerdaten => Bewertungsdaten

Traditionelles Schreiben, keine Erklärung erforderlich

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

Kein neuer Freund Promise

Promise wird schon lange erwähnt und ist auch Teil von ES6. Versprechen kann die durch die Rückrufhölle verursachte Pyramide des Untergangs beseitigen und den Code klarer machen.

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

Natürlich kann die Verwendung von Promise.all prägnanter sein

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

Leistungsstarke Generatoren für neue Freunde

Generatoren sind auch eine neue Funktion von ES6, die Code anhalten/ausführen kann . Yield bedeutet Anhalten und iterator.next bedeutet, dass der nächste Schritt ausgeführt wird. Wenn Sie Generatoren nicht verstehen, können Sie es ignorieren und „await/async“ direkt lernen.

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

Wird in Kombination mit der Fetch-API verwendet:

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

In Array-Reihenfolge ausführen

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

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

Verwenden Sie „await/async“, um synchron zu denken Das Lösen von asynchronem Code fühlt sich sehr cool und aufregend an!

Empfohlenes Tutorial: „

js Basic Tutorial

“

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Funktion und Verwendung vonawait/async in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!