Async/Await をマスターする: JavaScript での非同期関数チェーンの処理

Async/Await: 非同期 JavaScript 呼び出しで直接待機せずに継続を保証する

最新の JavaScript を使用したフロントエンド ソリューション (async/await を使用)

// Solution 1: Using async/await with Promises in JavaScript
async function functionFirst() {
  console.log('First is called');
  setTimeout(functionSecond, 1000);
  console.log('First fired Second and does not wait for its execution');
  return new Promise(resolve => {
    setTimeout(resolve, 2000); // Set timeout for the entire chain to complete
  });
}

function functionSecond() {
  console.log('Second is called');
  setTimeout(functionLast, 1000);
}

function functionLast() {
  console.log('Last is called');
}

async function functionMain() {
  await functionFirst();
  console.log('called First and continue only after Last is done');
}

functionMain();

ノンブロッキング フローのコールバックを使用した非同期チェーンの処理

プレーンな JavaScript でコールバック関数を使用するフロントエンド アプローチ

// Solution 2: Using Callbacks to Manage Asynchronous Flow Without Blocking
function functionFirst(callback) {
  console.log('First is called');
  setTimeout(() => {
    functionSecond(callback);
  }, 1000);
  console.log('First fired Second and does not wait for its execution');
}

function functionSecond(callback) {
  console.log('Second is called');
  setTimeout(() => {
    functionLast(callback);
  }, 1000);
}

function functionLast(callback) {
  console.log('Last is called');
  callback();
}

function functionMain() {
  functionFirst(() => {
    console.log('called First and continue only after Last is done');
  });
}

functionMain();

イベント エミッタを使用して非同期フローを完全に制御する

Node.js とイベント エミッターを使用した非同期フロー制御のためのバックエンド アプローチ

// Solution 3: Using Node.js EventEmitter to Handle Asynchronous Functions
const EventEmitter = require('events');
const eventEmitter = new EventEmitter();

function functionFirst() {
  console.log('First is called');
  setTimeout(() => {
    eventEmitter.emit('secondCalled');
  }, 1000);
  console.log('First fired Second and does not wait for its execution');
}

function functionSecond() {
  console.log('Second is called');
  setTimeout(() => {
    eventEmitter.emit('lastCalled');
  }, 1000);
}

function functionLast() {
  console.log('Last is called');
}

eventEmitter.on('secondCalled', functionSecond);
eventEmitter.on('lastCalled', functionLast);

function functionMain() {
  functionFirst();
  eventEmitter.on('lastCalled', () => {
    console.log('called First and continue only after Last is done');
  });
}

functionMain();

Async/Await および非同期関数に関するよくある質問

1. 違いは何ですか async/await そして Promises?
2. async/await 上に構築された糖衣構文です Promises、よりクリーンで読みやすい非同期コードが可能になります。連鎖する代わりに .then()、あなたは使用します await まで関数の実行を一時停止します。 Promise 解決します。
3. 混ぜてもいいですか async/await そして callbacks?
4. はい、同じコードベースで両方を使用できます。ただし、コールバック関数が競合しないようにすることが重要です。 Promises または async/await 使用すると、予期しない動作が発生する可能性があります。
5. でのエラーを処理するにはどうすればよいですか async 機能?
6. を包むことができます await 内部での呼び出し try/catch ブロックを使用して非同期実行中に発生するエラーをキャッチし、アプリがスムーズに実行され続けるようにします。
7. の役割は何ですか EventEmitter 非同期コードで?
8. の EventEmitter カスタム イベントを発行してそれをリッスンできるようにし、Node.js で複数の非同期タスクを処理するための構造化された方法を提供します。
9. 使用しないとどうなるか await で async 関数？
10. 使用しない場合 await、関数は待機せずに実行を続けます。 Promise 解決できず、予測できない結果につながる可能性があります。

JavaScript における非同期フロー制御に関する最終的な考え方

非同期フローの管理は、特に関数が互いにトリガーする場合に困難になることがあります。 Promises で async/await を使用すると、不必要なブロックなしでプログラムがスムーズに実行されるため、関数チェーンの完了を待つ必要がある状況に最適です。

イベント駆動型のアプローチまたはコールバックを組み込むと、サーバー リクエストの管理や複雑なプロセスの処理など、特定のユースケースに対する制御レベルがさらに追加されます。これらの手法を組み合わせることで、開発者は複数の非同期操作を扱う場合でも、効率的で応答性の高いアプリケーションを作成できるようになります。