JavaScriptのawait/asyncの機能と使い方を詳しく解説

JavaScript における await/async の役割と使用法

共有:

await/ async は ES7 の最も重要な機能の 1 つであり、これまでのところ JS にとって最高の非同期ソリューションです。 ES2016 には含まれていませんが、間もなく登場する予定で、現在は ES-NextStage4 段階にあります。

直接例に進みましょう。たとえば、製品データ => ユーザー データ => コメント データ

旧友 Ajax

の順に取得する必要があります。従来の記述方法、説明する必要はありません

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

新しい友達ではありません Promise

Promise は長い間言及されており、ES6 の一部でもあります。 Promise を使用すると、コールバック地獄によって引き起こされる破滅のピラミッドを排除し、コードをより明確にすることができます。

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

もちろん、Promise.all を使用するとより簡潔になります

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

強力な新しい友達 ジェネレーター

ジェネレーターも ES6 の新機能で、コードを一時停止/実行できます。 。 Yield は一時停止を意味し、iterator.next は次のステップを実行することを意味します。ジェネレーターを理解していなくても問題ありません。無視して、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();
碉堡的朋友 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);
}());

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

配列順に実行

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

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

await/async を使用して同期的に考える非同期コードを解くのはとてもクールでエキサイティングな気分です。

推奨チュートリアル:「js 基本チュートリアル」

以上がJavaScriptのawait/asyncの機能と使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。