Skip to content

DNET_AsyncAwaitJavaScript

Jump to bottom
nishi_74322014 edited this page Sep 11, 2026 · 1 revision

async/await (JavaScript)

概要

  • .NETの async/await とは異なる。
  • Promiseを、更に進化させた実装。
    • ジェネレータと Promise を組み合わせたもの。
    • Promise を明示する必要がなくなる。

詳細

async 関数

async 関数 = AsyncFunction

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

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

ステートメント

戻り値

  • return

    • returnした値は、Promise.resolve()に渡して実行するPromiseオブジェクトにラップされて返される。
    • returnしなかった場合、undefinedをPromise.resolve()に渡して実行するPromiseオブジェクトにラップされて返される。

  • throw

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

結果

このため、

  • 明示的にPromiseオブジェクトを返す必要がなくなる。
  • thenでPromiseオブジェクトをチェーンする必要がなくなる（await 式で、Promiseの解決を待つ）。

注意

  • return ステートメント上で await 式を使用しない。
  • async 関数の返値は暗黙的に Promise.resolve() でラップされるため。

await 式

動作

  • await 式は async 関数 の実行を一時停止し、Promiseの解決を待つ。
  • 解決後、async 関数 の実行を再開し、解決された値を返す。

例外

  • 値が Promiseではなかった場合、解決された promise に変換。
  • Promiseが拒絶された場合、await 式は理由となった値をスロー。

サンプル・コード

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

  • await 式によって Promiseの解決を待つため、処理を同期的に書ける。

    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」が表示される。

参考

JavaScript | MDN

Qiita

正誤

  • 「便宜所、非同期処理を含まない。」→「便宜上、非同期処理を含まない。」（2 箇所）

移行メモ

  • 「戻る」の並びにある「async/await (JavaScript)」は自ページのため、 その旨を補ってプレーン・テキストとした。
  • PukiWiki のページ内アンカ（#xxxxxxxx）は GitHub Wiki では再現できないため、 同一ページ内のアンカは見出しから生成されるアンカに張り替えた。 Promise.resolve() / Promise.reject() に張られていた Promise (JavaScript) へのリンクは、 同じ箇条書き内で重複するためプレーン・テキストとした。
  • マイクロソフト系技術情報 Wiki（techinfoofmicrosofttech.osscons.jp）への URL リンクは、移行済みの async/await に張り替えた。
  • 元 Wiki の行頭空白によるプレフォーマット・ブロックは、 フェンス付きコードブロックにした。

Tags: 移行, JavaScript, async/await, Promise, 非同期処理, ES2017, AsyncFunction, await

このWikiは「Open棟梁Project」,「OSSコンソーシアム 開発基盤部会」によって運営されています。

NetDevInfraWiki

マイクロソフト系技術情報 Wiki
Open 棟梁 Wiki

（未着手）

開発基盤部会 Wiki

移行管理: DONE ／ TODO

Clone this wiki locally