非同期 / 待機

async/await は、Promise を操作するためのより明確な構文です。コードは 次のようになります。同期コード ですが、舞台裏では前のレッスンとまったく同じ Promise を使用します。

`async function`

async で宣言された関数は常に Promise を返します。

async function forty() {
  return 40;
}

forty(); // Promise { 40 }
forty().then((v) => console.log(v)); // 40

「通常の」値を返した場合でも、関数はそれを解決された Promise にラップします。

`await`

async function 内では、Promise の前に await を置くことができます: 実行は 一時停止 Promise が解決されるまで、解決された値で続行されます。

async function sum() {
  const a = await Promise.resolve(10);
  const b = await Promise.resolve(20);
  return a + b; // 30
}

.then スタイルと同等 (より冗長):

function sum() {
  return Promise.resolve(10).then((a) => Promise.resolve(20).then((b) => a + b));
}

`await` はエラーを伝播します

Promise が拒否された場合、await はエラーを再スローします。普通に釣れるよ try/catch:

async function read() {
  try {
    const x = await Promise.reject(new Error('no'));
    return x;
  } catch (err) {
    return 'error: ' + err.message;
  }
}

read(); // Promise { 'error: no' }

矢印の非同期

const double = async (n) => n * 2;
double(5); // Promise { 10 }

試してみてください

運動#js.m7.l2.e1

試行回数: 0読み込み中…

数値の Promise を受け取り、数値 + 1 を (Promise として) 返す `async function addOne(p)` を定義します。 await を使用します。

エディターを読み込み中…

ヒントを表示

const n = p を待ちます; n + 1 を返します。

3 回の試行後に解決策が利用可能になります

復習演習

運動#js.m7.l2.e2