非同期ES7 /のawaitの非同期動作を理解するために、

1.、非同期何待っているのですか？

非同期は非同期で非同期に関数を宣言するために使用され、それが「非同期」の手段であることを示唆しています。そして、待っては文字通り非同期完了を待っている、手段を「待つ」という意味します。非同期機能で使用することだけ待ちます。

通常非同期、約束に従って待つが一緒に使用されています。なぜあなたは言うのですか？非同期非同期関数の任意の適切なタイプで戻さながらオブジェクトが約束されているからです。そのような結果は、プロミスオブジェクト（オブジェクトではない場合、それは非同期それが何であるかを返すことを約束）で待ちます。

取得した後のPromiseオブジェクトは、次の解決を待つか、拒否することを約束待っています。

私たちは例を見て：

1  VARの SLEEP = 関数（時間）{
 2      リターン 新しい新プロミス（関数（解決、拒否）{
 3          のsetTimeout（関数（）{
 4              解決（）;
 5          }、時間）;
 6      }）
 7。 };
 8  
。9  VaRのスタート=非同期関数（）{
 10      // ここで同期コードのように直感的に使用する
11。      はconsole.log（ '開始' ）;
 12である      のawaitのSLEEP（3000 ）;
 13である      にconsole.log（ '末端' ）;
14  }。
15  
16スタート（）;

上記のコードを実行して結果コンソールは：「スタート」をプリントアウトし、「終了」をプリントアウトするために3秒間待機し、これは非同期の簡単な例である/待ちます。

2、我々は知っている必要があります：

1 1 、非同期内部この機能で使用することだけ待つ、これは非同期関数であることを示しています。
2  
。3 2は、非同期/待つ非同期コードは、製造の新しい方法です。非同期コールバック・プログラム・コードと約束する前に。
4  
。5。3、非同期に/のawaitは約束に基づいています。
図6は、    背後に続く約束はオブジェクトでなければなりません待つ（もちろん、他の戻り値は...重要ではありませんが、すぐに実行されますが、それは意味がありません）、
 7     のawaitは結果を待つためにここに戻り、その後、継続する約束を表します。
8  
9 4、非同期/約束、同様に非ブロッキングとしてお待ちしております。
10  
11 5、非同期/非同期は、のawaitのコードを見て作るより、同期コードのように振る舞います。これは、非同期/の真の力を待つされるが、最大の利点の約束に比べてと言うことができます。

3、最初にどのような役割非同期機能を理解します

1つの非同期機能テスト（）{
 2    リターンの"Hello World" 。
3  }
 4  
5 CONST結果= 試験（）。
6にconsole.log（結果）。

ブラウザのプリントアウトは、次のとおりです。約束{[[PromiseStatus]]： "解決"、[[PromiseValue]]： "Hello World" の}

非同期関数が値を返さない場合を考えてみて？以下のように見えますか？次のコード：

1つの非同期機能テスト（）{
 2   はconsole.log（ "111111111" ）
 3  }
 4  
5 CONST結果= 試験（）。
6にconsole.log（結果）。

次のようにブラウザ印刷結果が
'111111111'
プロミスは、{[[PromiseStatus]： "解決"、[[PromiseValue]：未定義}
が返される結果はPromise.resolveある（未定義）

ここを参照してください私を理解できますか？非同期関数は、プロミスオブジェクトを返します。これは、我々がPromise.resolve（）約束カプセル化されたオブジェクトによって一定の、この一定の意志非同期に非同期機能を返す場合ことを意味します。

それは約束のオブジェクトであるので、我々はまた、（それまでに自分の価値を得ることができます）メソッド、次のように

テスト（）、次いで（RES => { 
    にconsole.log（RES）;     // 输出のHello World 
}）。

上記のコードを読んで終わりに非同期/のawait薄暗い非常に明確ではありませんか？

私たちは、約束の特性を知っている - ノーウェイトを、ので、事情を待つことなく、非同期機能を実行し、それは約束のオブジェクトを返し、すぐに実行されるだろうし、文の後ろにブロックされることはありません。この一般的なオブジェクトプロミス機能は全く異なる返しません。

その後、次のキーポイントは、キーワードを待つことです。

4は、薄暗い待って、何をしてきましたか？

一般的に、オペレータが約束オブジェクトを待って待っています。それだけで非同期関数の非同期機能で使用することができます。しかし、実際には、待っていた後、約束は任意のオブジェクトまたは値を待機させることができるということです。参照してください：のawait文法を。

約束は、オペレータを待つために渡された場合、通常の処理が完了した約束を待って待って、処理結果を返します

機能試験（X）{
   戻り 、新たな約束（決意=> { 
    たsetTimeout（（） => { 
      解決（x）; 
    }、 2000 ）; 
  }）; 
} 

非同期関数F1（）{
   VAR X =試験（10待ちます）。
  console.log（X）。// 10 
} 
F1（）。

値が約束されていない場合、その処理結果を待って、通常の処理の約束として、この値を変換します待っています。

非同期関数F2（）{
   VAR用のY = 20を待ちます。
  console.log（Y）。// 20 
} 
F2（）。

約束は、例外を処理した場合、例外値がスローされます。

非同期関数F3（）{
   試みる{
     VARの Zが=待つPromise.reject（30 ）。
  } キャッチ（E）{ 
    にconsole.log（E）; // 30 
  } 
} 
F3（）。

図5は、非同期/の利点は、次に待つことの処理チェーン

これは、非同期/を使用している最も有利な場所を待ちます

、（実際には、それまでに多層のコールバックチェーンの問題を解決することを約束した一本鎖は、非同期/のawaitの利点を発見しませんが、あなたが約束の複数で構成される、チェーンに対処するための時間を必要とする場合、利点が発揮することができます約束そして今、非同期で/それを最適化し、さらに待つ、それは非同期（async）とすることができます/より良い取引を行うに基づいて、約束を待ちます）

サービスを想定すると、いくつかのステップで完了し、各ステップは、非同期であるが、最後のステップの結果に。我々はまだ非同期操作をシミュレートするためのsetTimeoutを使用します。

このコードは、インターネットの段落ケースの下にコピーされ、ライン上の問題を説明することができます。

/**
 * 传入参数 n，表示这个函数执行的时间（毫秒）
 * 执行的结果是 n + 200，这个值将用于下一步骤
 */
function takeLongTime(n) {
    return new Promise(resolve => {
        setTimeout(() => resolve(n + 200), n);
    });
}

function step1(n) {
    console.log(`step1 with ${n}`);
    return takeLongTime(n);
}

function step2(n) {
    console.log(`step2 with ${n}`);
    return takeLongTime(n);
}

function step3(n) {
    console.log(`step3 with ${n}`);
    return takeLongTime(n);
}

现在用 Promise 方式来实现这三个步骤的处理

function doIt() {
    console.time("doIt");
    const time1 = 300;
    step1(time1)
        .then(time2 => step2(time2))
        .then(time3 => step3(time3))
        .then(result => {
            console.log(`result is ${result}`);
            console.timeEnd("doIt");
        });
}

doIt();

// c:\var\test>node --harmony_async_await .
// step1 with 300
// step2 with 500
// step3 with 700
// result is 900
// doIt: 1507.251ms

输出结果 result 是 step3() 的参数 700 + 200 = 900。doIt() 顺序执行了三个步骤，一共用了 300 + 500 + 700 = 1500 毫秒，和 console.time()/console.timeEnd() 计算的结果一致。

如果用 async/await 来实现呢，会是这样

async function doIt() {
    console.time("doIt");
    const time1 = 300;
    const time2 = await step1(time1);
    const time3 = await step2(time2);
    const result = await step3(time3);
    console.log(`result is ${result}`);
    console.timeEnd("doIt");
}

doIt();

结果和之前的 Promise 实现是一样的，但是这个代码看起来是不是清晰得多，几乎跟同步代码一样。

关于async/await 处理 then 链，网上有很多文章，可以搜搜，基本可以理解的差不多。

总结参考文章：https://www.jianshu.com/p/5cae46133bad

 
  function  
  takeLongTime( 
  n) { 
 
  return  
  new  
  Promise( 
  resolve  
  => { 
 
  setTimeout(()  
  =>  
  resolve(n  
  +  
  200), n); 
 
       }); 
 
   }