「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。

-[[戻る>JavaScriptのスレッド処理]]
--[[Promise (JavaScript)]]
--async/await (JavaScript)

*目次 [#m0c40497]
#contents

*概要 [#h7795439]
-.NETの [[async/await>https://techinfoofmicrosofttech.osscons.jp/index.php?async%2Fawait]] とは異なる。
-[[Promise>Promise (JavaScript)]]を、更に進化させた実装。
--ジェネレータと [[Promise>Promise (JavaScript)]]を組み合わせたもの。
--[[Promise>Promise (JavaScript)]]を明示する必要がなくなる。

*詳細 [#ydcc8c6a]

**async 関数 [#ob2c2475]
async 関数 = AsyncFunction

-関数定義の前にasyncと付けると、~
その関数は AsyncFunction オブジェクトになる。

-AsyncFunctionは、以下のような動作をする。

***ステートメント [#n6083752]
-[[await 式>#c87fcc24]]を含むことができる。

***戻り値 [#rfcd8ea0]
-return
--returnした値は、[[Promise.resolve()>Promise (JavaScript)]]に渡して実行する[[Promise>Promise (JavaScript)]]オブジェクトにラップされて返される。
--returnしなかった場合、undefinedを[[Promise.resolve()>Promise (JavaScript)]]に渡して実行する[[Promise>Promise (JavaScript)]]オブジェクトにラップされて返される。

-throw
--また、throwした値は、[[Promise.reject()>Promise (JavaScript)]]に渡して実行する[[Promise>Promise (JavaScript)]]オブジェクトにラップされて返される。

***結果 [#lb2dd987]
このため、

-明示的に[[Promise>Promise (JavaScript)]]オブジェクトを返す必要がなくなる。
-thenで[[Promise>Promise (JavaScript)]]オブジェクトをチェーンする必要がなくなる（[[await 式>#c87fcc24]]で、[[Promise>Promise (JavaScript)]]の解決を待つ）。

***注意 [#xc7c457b]
-return ステートメント上で [[await 式>#c87fcc24]]を使用しない。
-async 関数の返値は暗黙的に [[Promise.resolve()>Promise (JavaScript)]] でラップされるため。

**await 式 [#c87fcc24]

***動作 [#af123dd7]
-await 式は [[async 関数>#ob2c2475]] の実行を一時停止し、[[Promise>Promise (JavaScript)]]の解決を待つ。
-解決後、[[async 関数>#ob2c2475]] の実行を再開し、解決された値を返す。

***例外 [#b3ba32ee]
-値が [[Promise>Promise (JavaScript)]]ではなかった場合、解決された promise に変換。
-[[Promise>Promise (JavaScript)]]が拒絶された場合、await 式は理由となった値をスロー。

*サンプル・コード [#c6d7838e]
**[[Promise>Promise (JavaScript)]] [#ua5cb4eb]
-thenのメソッド・チェーンでコールバックを指定する実装になる。
--便宜所、非同期処理を含まない。
--以下から実行可能~
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/then
 const promise1 = (num) => {
     return new Promise(resolve => {
         resolve(num + 1);
     });
 };
  
 const promise2 = (num) => {
     return new Promise(resolve => {
         resolve(num + 2);
     });
 };
  
 const promise3 = (num) => {
     return new Promise(resolve => {
         resolve(num + 3);
     });
 };
  
 const promise = promise1(0)
     .then(num => {
         return promise2(num);
     })
     .then(num => {
         return promise3(num);
     })
     .then(num => {
         console.log(num);
     })
     .catch(error => {
         console.log(error);
     })
     });

-結果~
「1 + 2 + 3 = 6」の「6」が表示される。

**async/await [#u17bf9f8]
-[[await 式>#c87fcc24]]によって [[Promise>Promise (JavaScript)]]の解決を待つため、処理を同期的に書ける。
--便宜所、非同期処理を含まない。
--以下から実行可能~
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function
 const asyncAwait1 = async (num) => {
     return new Promise(resolve => {
         resolve(num + 1);
     });
 };
  
 const asyncAwait2 = async (num) => {
     return new Promise(resolve => {
         resolve(num + 2);
     });
 };
  
 const asyncAwait3 = async (num) => {
     return new Promise(resolve => {
         resolve(num + 3);
     });
 };
  
 const asyncAwait = async () => {
     var asyncResult1 = await asyncAwait1(0);
     var asyncResult2 = await asyncAwait2(asyncResult1);
     var asyncResult3 = await asyncAwait3(asyncResult2);
     var sum = asyncResult3;
     console.log(asyncResult3);
 };
  
 asyncAwait().catch(error => { console.log(error) });


-結果~
「1 + 2 + 3 = 6」の「6」が表示される。

*参考 [#rc6101e1]
-async/awaitを使った非同期処理の書き方 - 30歳からのプログラミング~
http://numb86-tech.hatenablog.com/entry/2017/10/08/192300
-[JavaScript] 僕がasync/awaitを好きなワケ ｜ Developers.IO~
https://dev.classmethod.jp/node-js/javascript-why-do-i-like-async-await/
-ES2017の新機能「async / await」でPromise（非同期処理）をスッキリ書く | maesblog~
https://mae.chab.in/archives/59793

**JavaScript | MDN [#od710c97]
-async function~
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function
-await~
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/await

**Qiita [#udcb7f97]
-async/await 入門（JavaScript）~
https://qiita.com/soarflat/items/1a9613e023200bbebcb3
>とはいえasync/awaitも[[Promiseを利用しているため、Promise自体の理解は必須>Promise (JavaScript)]]です。

-async await の使い方~
https://qiita.com/niusounds/items/37c1f9b021b62194e077

-Promise再入門 > ② ~async/await編~~
https://qiita.com/gctfuji/items/47d310ae795aa9131c14

-JavaScriptのasync/awaitがPromiseよりもっと良い~
https://qiita.com/Anders/items/dfcb48d8b27ceaffb443

-Promiseの使い方、それに代わるasync/awaitの使い方~
https://qiita.com/suin/items/97041d3e0691c12f4974
トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS