この記事を参考にした場合は、おそらく私のつぶやきも役に立つでしょう.そこでここでは、Web開発とコンテンツの作成についての情報を私に従ってください.この記事は私のもとで出版されたBlog .
ジャバスクリプト開発者async-await . JavaScriptの非同期操作を処理する最も簡単な方法です.我々が間で使いやすさの世論調査をすると仮定してくださいasync/await 構文対promise.then()...then().catch() , Async/重要なマージンで勝つつもりです.しかしながら、我々はここで重要な何かを無視するかもしれません.
構文と使いやすさについてだけでなく、それらを比較する必要があります.私たちは、Async/Waitと約束を処理するという明白な古い方法を比較するべきではありません.様々なユースケースと機会があります.また、約束の理解は、async/waitの存在を認めることの重要な部分です.

Welcome to the third article of the series, Demystifying JavaScript Promises - A New Way to Learn. Let's start discussing async/await. If you are new to the series, please feel free to check out the previous posts,

• JavaScript Promises - Explain Like I'm Five
• JavaScript Promise Chain - The art of handling promises

あなたが同様にビデオコンテンツからAsync/Waitキーワードを学ぶのが好きであるならば、この内容はまた、ここのビデオチュートリアルとして利用できます:🙂
してください将来のコンテンツをお気軽に

async / waitはキーワードです。

JavaScriptは2つのキーワードを提供します.async and await , 約束の使用を劇的に容易にするために.AsyncとWaitキーワードは、新しいプログラミング概念を導入するよりJavaScript言語構文を強化するのに貢献します.
平易な英語で.

使用するasync 約束を返す.

使用するawait 待って、約束を処理する.

より良い概念を理解するためにさらに拡大しましょう.

The async キーワードは非同期操作を実行することになっている関数のためです.これは、関数が実行を終了したり、結果を返したり、エラーをスローしたりする前にしばらくしているかもしれないことを意味します.

我々はasync としての機能を持つキーワード.

 async function fetchUserDetails(userId) {
      // pretend we make an asynchronous call
     // and return the user details
     return {'name': 'Robin', 'likes': ['toys', 'pizzas']};
 }

矢印関数で

 const fetchUserDetails = async (userId) => {
     // pretend we make an asynchronous call
    // and return the user details
    return {'name': 'Robin', 'likes': ['toys', 'pizzas']};
 }

では、async関数はfetchUserDetails 我々がそれを起動するとき、戻ります?It returns a Promise .

通常の関数とasync function つまり、後者は常に約束を返します.Async関数から明示的に約束を返さない場合、JavaScriptは自動的にその値を値をラップして返します.

The await キーワードは、約束が解決されるまで(解決または拒否)、値/エラーが返される/スローされるまでJavaScript関数の実行を待機させるためです.としてfetchUserDetails async関数は約束を返します.await キーワード.

 const user = await fetchUserDetails();
 console.log(user)

さて、コンソールログに返されたユーザオブジェクトが表示されます.

あなたは、平野古いを使用したでしょう.then() その約束を処理する方法await キーワード.

 fetchUserDetails().then((user) => console.log(user));

Async / Waitの使用についてのいくつかの規則

私たちは、asyncとwaitキーワードを使ういくつかの簡単な規則を理解する必要があります.

あなたは、使用できませんawait 通常の非同期関数のキーワード.あなたがそうしようとするならば、JavaScriptエンジンは構文エラーを投げます.

 function caller() {
   // Using await in a non-async function.
   const user = await fetchUserDetails();
 }

 // This will result in an syntax error
 caller();

使用後の関数await キーワードは、async 関数.非同期関数でなければならない必須規則はありません.以下の例で理解しましょう.

同期メッセージを返す非同期関数を作成します.Hi .

 function getSynchronousHi() {
    return 'Hi';
 }

あなたはまだキーワードを使用することができますawait 上記の関数を呼び出している間.

 async function caller() {
    const messageHi = await getSynchronousHi();
    console.log( messageHi);
 }

 caller(); // Output, 'Hi' in the console.

ご覧の通り、我々はawait 非async関数では、非async関数の内部(または内部)では使用できません.

The V8 engine(version >= 8.9) supports the top-level await モジュールで.これは、async関数の外部で使用することを許可していることを意味します.クロムdevtools、ノード.JS REPLのサポートは、トップレベルはしばらくしばらく待っています.しかし、それはまだ我々が議論した環境を超えてサポートされていません.

トップレベルを使用するawait サポートされていない環境では、このように匿名関数にラップします.

 (async () => {
     const user = await fetchUserDetails();
 })();

async / waitでエラーを処理する方法？

エラー処理について.catch() ハンドラメソッドpromise chain 記事.約束が拒絶されるならば、それはエラーを投げます、そして、我々はそれを取り扱うためにそれを捕える必要があります.
とasync/await キーワードは、伝統的なエラーを扱うことができますtry...catch . エラーが発生した場合、catchブロックに移動します.以下の例を見てください.
もしuserId and password は空白です.もしそうならば、約束を拒絶することによって、エラーを投げてください.さもなければ、成功メッセージでそれを解決してください.

const validateUser = ({userId, password}) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (userId && password) {
                resolve(`${userId} you have been authenticated successfully!!!`);
            } else {
                reject({message: 'userId or Password could be blank!'});
            }

        }, 2000);
    });
}

上記のメソッドが約束を返すと、await キーワード.ユーザIDとパスワードを空の文字列として渡す場合に注目しましょう.

const app = async () => {
    const data = {
        userId: '',
        password: ''
    };

    try {
        console.log('Initializing...');
        const result = await validateUser(data);
        console.log(result);
    } catch (e) {
        console.error(e.message);
    }
}

// invoke the function app
app();

を呼び出すとapp() 関数validateUser(data) は暗黙的にエラーをスローします.我々はそれを使用してtry...catch にapp() 関数.コントロールはcatch ブロック.エラーログを取得します.

有効ならばuserId and password 値は、コンソールで期待結果ログを表示します.

Async / waitでPizzaHubの例を書くことはできますか？

確かに、それは素晴らしい考えだと思います.我々は、APISを作成しているメソッドは、ピザの順序を処理するRobin and the PizzaHub Story . 覚えてorderPizza() 機能?我々handled the promises 使用.then() and .catch() ハンドラメソッド.
書き直しましょうorderPizza() 関数使用async/await . あなたは、我々は以下を参照してください、それは非常に簡略化されたバージョンです.

async function orderPizza(type, name) {
    try{
        // Get the Nearby Pizza Shop
        const shopId = await fetch("/api/pizzahub/shop", {
            'lang': 38.8951 , 
            'lat': -77.0364});
        // Get all pizzas from the shop  
        const allPizzas = await fetch("/api/pizzahub/pizza", {
            'shopId': shopId});
        // Check the availability of the selected pizza
        const pizza = await getMyPizza(allPizzas, type, name);
        // Check the availability of the selected beverage
        const beverage =  await fetch("/api/pizzahub/beverages", {
            'pizzaId': pizza.id});
        // Create the order
        const result = await create("/api/order", {
                beverage: beverage.name,
                name: name,
                type: type,
            });
        console.log(result.message);
    } catch(error){
        console.error(error.message);
    };
}

して下さいcomplete source code from here . だから今、あなたはどのように書くかを知っているorderPizza() 関数は、async/waitとplain oldの両方を使う.
を推測したり、どのようにJavaScriptcallback 機能?してくださいlook from here . 私はあなたが約束の世界に感謝し、Asyncを待って😀.

では、次は何ですか？

JavaScriptの約束を学び、マスターするあなたの努力に感謝します.それは確かに言語の重要な側面です.次に、私たちは約Promise APIs . Promise APIs とasync/await キーワードは約束を処理するのにはるかに良い経験をする.我々はそれを視覚的なデモや例を使用して学習します.
それまでは、学習を楽しむとやる気を維持してください.あなたはこのGithubレポからこの記事で使用されるすべてのソースコードを見つけることができます.

アタパス / 約束準備

新しい方法でJavaScriptの約束を学ぶ。このリポジトリには、すべてのソースコードと例があります😉.

私はあなたがこの記事を楽しんだり、役に立つことを願っています.つながりましょう.考え、ヒント、およびコードの練習を共有してください.フォローをお願いします.