例を使用して JavaScript の Async/Await を見てみましょう

この記事の著者は、JavaScript における Async/Await の例を調べています。 全体として、Async/Await は非同期コードを作成する便利な方法です。 この機能が登場する前は、そのようなコードはコールバックとプロミスを使用して記述されていました。 元の記事の著者は、さまざまな例を分析することで Async/Await の利点を明らかにしています。

リマインダー： 「Habr」のすべての読者が対象 - 「Habr」プロモーション コードを使用してスキルボックス コースに登録すると 10 ルーブルの割引。

スキルボックスは次のことを推奨します。 教育オンラインコース 「Java開発者」.

コー​​ルバック

コールバックは、呼び出しが無期限に遅延される関数です。 以前は、結果をすぐに取得できないコード領域でコールバックが使用されていました。

以下は、Node.js でファイルを非同期的に読み取る例です。

fs.readFile(__filename, 'utf-8', (err, data) => {
  if (err) {
    throw err;
  }
  console.log(data);
});

複数の非同期操作を一度に実行する必要がある場合、問題が発生します。 次のシナリオを想像してみましょう。Arfat ユーザー データベースに対してリクエストが行われ、その profile_img_url フィールドを読み取り、someserver.com サーバーから画像をダウンロードする必要があります。
ダウンロード後、画像を別の形式、たとえば PNG から JPEG に変換します。 変換が成功すると、ユーザーの電子メールにレターが送信されます。 次に、イベントに関する情報が、日付を示すtransformations.log ファイルに入力されます。

コードの最後の部分にあるコールバックの重複と多数の }) に注意する必要があります。 それはコールバック地獄または破滅のピラミッドと呼ばれます。

この方法の欠点は明らかです。

• このコードは読みにくいです。
• エラーの処理も難しく、コードの品質が低下することがよくあります。

この問題を解決するために、Promise が JavaScript に追加されました。 これにより、コールバックの深いネストを .then という単語に置き換えることができます。

Promise の良い面は、コードを左から右ではなく上から下に読みやすくすることです。 ただし、Promise には問題もあります。

• .then を大量に追加する必要があります。
• try/catch の代わりに、.catch を使用してすべてのエラーが処理されます。
• XNUMX つのループ内で複数の Promise を扱うことは必ずしも便利であるとは限りません。場合によっては、コードが複雑になります。

ここでは、最後の点の意味を示す問題を示します。

0 から 10 までの一連の数値をランダムな間隔 (0 ～ n 秒) で出力する for ループがあるとします。 Promise を使用して、数値が 0 から 10 まで順番に出力されるようにこのループを変更する必要があります。つまり、6 を出力するのに 2 秒かかり、XNUMX を出力するのに XNUMX 秒かかる場合は、最初に XNUMX を出力し、その後に出力する必要があります。印刷のカウントダウンが始まります。

そしてもちろん、この問題を解決するために Async/Await や .sort は使用しません。 解決策の例は最後にあります。

非同期関数

ES2017 (ES8) に非同期関数が追加されたことで、Promise を扱うタスクが簡素化されました。 async 関数は Promise の「上で」動作することに注意してください。 これらの関数は、質的に異なる概念を表すものではありません。 非同期関数は、Promise を使用するコードの代替として意図されています。

Async/Await を使用すると、非同期コードを使用した作業を同期スタイルで整理できます。

したがって、Promise を理解すると、Async/Await の原則を理解しやすくなります。

構文

通常、これは async と await の XNUMX つのキーワードで構成されます。 最初の単語は関数を非同期に変換します。 このような関数では await を使用できます。 それ以外の場合、この関数を使用するとエラーが発生します。

// With function declaration
 
async function myFn() {
  // await ...
}
 
// With arrow function
 
const myFn = async () => {
  // await ...
}
 
function myFn() {
  // await fn(); (Syntax Error since no async)
}
 

Async は関数宣言の先頭、アロー関数の場合は「=」記号と括弧の間に挿入されます。

これらの関数は、メソッドとしてオブジェクトに配置することも、クラス宣言で使用することもできます。

// As an object's method
 
const obj = {
  async getName() {
    return fetch('https://www.example.com');
  }
}
 
// In a class
 
class Obj {
  async getResource() {
    return fetch('https://www.example.com');
  }
}

注意！ クラス コンストラクターとゲッター/セッターは非同期にできないことを覚えておく価値があります。

セマンティクスと実行ルール

非同期関数は基本的に標準の JS 関数と似ていますが、例外もあります。

したがって、非同期関数は常に Promise を返します。

async function fn() {
  return 'hello';
}
fn().then(console.log)
// hello

具体的には、fn は文字列 hello を返します。 これは非同期関数であるため、文字列値はコンストラクターを使用して Promise にラップされます。

非同期を使用しない代替設計は次のとおりです。

function fn() {
  return Promise.resolve('hello');
}
 
fn().then(console.log);
// hello

この場合、Promise は「手動」で返されます。 非同期関数は常に新しい Promise でラップされます。

戻り値がプリミティブの場合、async 関数は値を Promise でラップして返します。 戻り値が Promise オブジェクトの場合、その解決は新しい Promise で返されます。

const p = Promise.resolve('hello')
p instanceof Promise;
// true
 
Promise.resolve(p) === p;
// true
 

しかし、非同期関数内でエラーが発生した場合はどうなるでしょうか?

async function foo() {
  throw Error('bar');
}
 
foo().catch(console.log);

処理されない場合、foo() は拒否付きの Promise を返します。 この状況では、Promise.resolve の代わりに、エラーを含む Promise.reject が返されます。

非同期関数は、何が返されるかに関係なく、常に Promise を出力します。

非同期関数は await ごとに一時停止します。

Await は式に影響します。 したがって、式が Promise である場合、async 関数は Promise が満たされるまで一時停止されます。 式が Promise ではない場合、Promise.resolve によって Promise に変換されて完了します。

// utility function to cause delay
// and get random value
 
const delayAndGetRandom = (ms) => {
  return new Promise(resolve => setTimeout(
    () => {
      const val = Math.trunc(Math.random() * 100);
      resolve(val);
    }, ms
  ));
};
 
async function fn() {
  const a = await 9;
  const b = await delayAndGetRandom(1000);
  const c = await 5;
  await delayAndGetRandom(1000);
 
  return a + b * c;
}
 
// Execute fn
fn().then(console.log);

ここでは、fn 関数がどのように機能するかを説明します。

• 呼び出し後の最初の行は const a = await 9; から変換されます。 const a = await Promise.resolve(9);。
• Await を使用した後、関数の実行は、 a がその値 (現在の状況では 9) を取得するまで一時停止されます。
• lateAndGetRandom(1000) は、関数自体が完了するまで (1 秒後) fn 関数の実行を一時停止します。 これにより、fn 機能が 1 秒間実質的に停止されます。
• replaceAndGetRandom(1000) は、resolve を介してランダムな値を返し、それが変数 b に割り当てられます。
• さて、変数 c の場合は変数 a の場合と似ています。 その後、すべてが一瞬停止しますが、delayAndGetRandom(1000) は必要ないため、何も返しません。
• その結果、値は式 a + b * c を使用して計算されます。 結果は Promise.resolve を使用して Promise にラップされ、関数によって返されます。

これらの一時停止は ES6 のジェネレーターを思い出させるかもしれませんが、それには何かがあります あなたの理由.

問題の解決

さて、上で述べた問題の解決策を見てみましょう。

finishMyTask 関数は、Await を使用して、queryDatabase、sendEmail、logTaskInFile などの操作の結果を待ちます。 このソリューションを Promise を使用したソリューションと比較すると、類似点が明らかになります。 ただし、Async/Await バージョンでは、すべての複雑な構文が大幅に簡素化されています。 この場合、.then/.catch のような多数のコールバックやチェーンはありません。

ここでは数値を出力するソリューションを示します。オプションは XNUMX つあります。

const wait = (i, ms) => new Promise(resolve => setTimeout(() => resolve(i), ms));
 
// Implementation One (Using for-loop)
const printNumbers = () => new Promise((resolve) => {
  let pr = Promise.resolve(0);
  for (let i = 1; i <= 10; i += 1) {
    pr = pr.then((val) => {
      console.log(val);
      return wait(i, Math.random() * 1000);
    });
  }
  resolve(pr);
});
 
// Implementation Two (Using Recursion)
 
const printNumbersRecursive = () => {
  return Promise.resolve(0).then(function processNextPromise(i) {
 
    if (i === 10) {
      return undefined;
    }
 
    return wait(i, Math.random() * 1000).then((val) => {
      console.log(val);
      return processNextPromise(i + 1);
    });
  });
};

そして、これは非同期関数を使用した解決策です。

async function printNumbersUsingAsync() {
  for (let i = 0; i < 10; i++) {
    await wait(i, Math.random() * 1000);
    console.log(i);
  }
}

Обработка осибок

未処理のエラーは、拒否された Promise にラップされます。 ただし、非同期関数は try/catch を使用してエラーを同期的に処理できます。

async function canRejectOrReturn() {
  // wait one second
  await new Promise(res => setTimeout(res, 1000));
 
// Reject with ~50% probability
  if (Math.random() > 0.5) {
    throw new Error('Sorry, number too big.')
  }
 
return 'perfect number';
}

canRejectOrReturn() は、成功するか (「完全な数値」)、エラーで失敗する (「申し訳ありません、数値が大きすぎます」) 非同期関数です。

async function foo() {
  try {
    await canRejectOrReturn();
  } catch (e) {
    return 'error caught';
  }
}

上記の例では canRejectOrReturn の実行が想定されているため、それ自体が失敗すると catch ブロックが実行されます。 その結果、関数 foo は未定義 (try ブロックで何も返されない場合) またはエラーがキャッチされて終了します。 その結果、try/catch が関数 foo 自体を処理するため、この関数は失敗しません。

別の例を次に示します。

async function foo() {
  try {
    return canRejectOrReturn();
  } catch (e) {
    return 'error caught';
  }
}

この例では、foo から canRejectOrReturn が返されることに注意してください。 この場合、Foo は完全な数値で終了するか、エラー (「申し訳ありません、数値が大きすぎます」) を返します。 catch ブロックは決して実行されません。

問題は、foo が canRejectOrReturn から渡された Promise を返すことです。 したがって、foo に対する解決策は canRejectOrReturn に対する解決策になります。 この場合、コードは XNUMX 行のみで構成されます。

try {
    const promise = canRejectOrReturn();
    return promise;
}

await と return を一緒に使用するとどうなるかは次のとおりです。

async function foo() {
  try {
    return await canRejectOrReturn();
  } catch (e) {
    return 'error caught';
  }
}

上記のコードでは、foo は完全数とエラーの両方をキャッチして正常に終了します。 ここで拒否はありません。 ただし、foo は unknown ではなく、canRejectOrReturn で戻ります。 return await canRejectOrReturn() 行を削除して、これを確認しましょう。

try {
    const value = await canRejectOrReturn();
    return value;
}
// …

よくある間違いと落とし穴

場合によっては、Async/Await を使用するとエラーが発生する可能性があります。

忘れられたまま待っています

これは非常に頻繁に発生します。Promise の前に await キーワードが忘れられています。

async function foo() {
  try {
    canRejectOrReturn();
  } catch (e) {
    return 'caught';
  }
}

ご覧のとおり、コードには await や return がありません。 したがって、foo は常に 1 秒の遅延なく undefine で終了します。 しかし、約束は必ず果たされます。 エラーまたは拒否がスローされた場合は、UnhandledPromiseRejectionWarning が呼び出されます。

コールバックの非同期関数

非同期関数は、.map または .filter でコールバックとしてよく使用されます。 例としては、GitHub 上で開いているリポジトリの数を返す fetchPublicReposCount(username) 関数があります。 メトリクスが必要なユーザーが XNUMX 人いるとします。 このタスクのコードは次のとおりです。

const url = 'https://api.github.com/users';
 
// Utility fn to fetch repo counts
const fetchPublicReposCount = async (username) => {
  const response = await fetch(`${url}/${username}`);
  const json = await response.json();
  return json['public_repos'];
}

ArfatSalman、octocat、norvig のアカウントが必要です。 この場合、次のようにします。

const users = [
  'ArfatSalman',
  'octocat',
  'norvig'
];
 
const counts = users.map(async username => {
  const count = await fetchPublicReposCount(username);
  return count;
});

.map コールバックの Await に注意する価値があります。 ここで、counts は Promise の配列であり、.map は指定された各ユーザーの匿名コールバックです。

await の過度に一貫した使用

このコードを例として見てみましょう。

async function fetchAllCounts(users) {
  const counts = [];
  for (let i = 0; i < users.length; i++) {
    const username = users[i];
    const count = await fetchPublicReposCount(username);
    counts.push(count);
  }
  return counts;
}

ここでは、リポジトリ番号が count 変数に配置され、この番号が counts 配列に追加されます。 このコードの問題は、最初のユーザーのデータがサーバーから到着するまで、後続のユーザーはすべてスタンバイ モードになることです。 したがって、一度に処理されるユーザーは XNUMX 人だけです。

たとえば、300 人のユーザーの処理に約 XNUMX ミリ秒かかる場合、すべてのユーザーではすでに XNUMX 秒になっており、費やされる時間はユーザーの数に直線的に依存します。 ただし、リポジトリ数の取得は相互に依存しないため、処理を並列化することができます。 これには、.map と Promise.all を操作する必要があります。

async function fetchAllCounts(users) {
  const promises = users.map(async username => {
    const count = await fetchPublicReposCount(username);
    return count;
  });
  return Promise.all(promises);
}

Promise.all は、Promise の配列を入力として受け取り、Promise を返します。 後者は、配列内のすべての Promise が完了した後、または最初の拒否時に完了します。 すべてが同時に開始しない場合があります。確実に同時開始するには、p-map を使用します。

まとめ

開発にとって非同期関数はますます重要になっています。 そうですね、非同期関数を適応的に使用するには、使用する価値があります 非同期反復子。 JavaScript 開発者は、この点に精通している必要があります。

スキルボックスは次のことを推奨します。

• 実践コース 「モバイルデベロッパーPRO」.
• オンラインコースの申し込み 「Pythonで学ぶデータアナリスト」.
• XNUMX年間の実践コース 「私はプロのウェブ開発者です」.

出所： habr.com