コールバック

JavaScript では、非同期呼び出しを処理するさまざまな方法があります。
これにより、サーバーからのデータの取得、ファイルの読み取り、イベントの待機などの非同期タスクを処理できるようになります。

コールバック

これは別の関数を呼び出す関数です。
よりよく理解できるように例を見てみましょう:

• ID とコールバック関数を指定して getUser() を呼び出し、ユーザー ID、名前、電子メールを出力します。コールバックは、非同期 getUser 操作が完了すると実行されます。

getUser() 関数:

• id: これは、getUser(1, ...) 呼び出しから渡された、取得するユーザーの ID です。

• コールバック: これは、「ユーザー データ」が取得された後に呼び出される関数です (ここでは setTimeout() 関数によってシミュレートされています)。

• setTimeout() 関数内で、遅延後に callback() 関数が呼び出され、引数として疑似ユーザー オブジェクトが渡されます: { id: id, name: 'Diana', email: 'Diana@test. com' }.

実行フロー:

1. getUser(1, user => { console.log('User', user); });
と呼ばれます。
2. getUser() 内で、setTimeout() を使用して 3 秒の遅延がトリガーされます。
3. 3 秒後: 「DB からユーザーを取得しています...」というメッセージがコンソールに記録されます。コールバック関数は、ユーザー オブジェクト { id: 1, name: 'Diana', email: 'Diana@test.com' } で呼び出されます。
4. コールバック関数は、ユーザーとユーザー オブジェクトをコンソールに記録します。

最終出力:

コールバック地獄

コールバック 地獄のパターン - これは、複数の非同期操作が相互に依存しており、深くネストされたコールバックにつながる場合に発生します。ネストが増えると、コードの読み取り、保守、デバッグが難しくなります。例を見てみましょう:

詳しく見てみましょう:

• ユーザーの取得: ここでは、最初の非同期呼び出し getUser(1) を開始します。これは、データベースからのユーザー データのフェッチをシミュレートします。データがフェッチされると、コールバック関数が実行され、ユーザーの詳細がコンソールに記録されます。

getUser(1, user => {
    console.log('User', user);
    // ...
});

ユーザーの注文の取得:
getUser() のコールバック内で、getOrders(user.id) への別の非同期呼び出しを行い、データベースからユーザーの注文を取得することをシミュレートします。これには、最初のコールバック内に別のコールバックをネストする必要があります。注文が取得されると、注文は記録されます。

getUser(1, user => {
    console.log('User', user);
    // ...
});

• 注文詳細の取得: 注文を取得した後、1 つの特定の注文 (orders[1]) の詳細を取得する必要があります。これにより、入れ子が 3 番目のレベルに進み、getOrdersDetails() が呼び出されて注文の詳細が取得され、コンソールに記録されます。

getOrders(user.id, orders => {
    console.log(`${user.name}'s orders`, orders);
    // ...
});

コード構造 (ネスト):

各非同期操作が前の非同期操作にどのように依存しており、その結果、深く入れ子になった構造になっていることに注目してください。コードを難しくする:

1. 読み取り: コールバックが深くネストされている場合、ロジックの流れを追うのは困難です。

2. エラー処理: 複数レベルのコールバックでエラーを処理するのは困難です。

3.デバッグ: 多くのレベルのコールバックが関係する場合、エラーが発生した場所の特定はより複雑になります。

また、コードが「密結合」になります。各関数は前の関数の出力に依存します。これは、コードが密結合になり、再利用性が低下することを意味します。

結果:

コールバック地獄の回避:
コールバック地獄は、Promises や async/await などの最新の JavaScript 機能を使用することで回避できます。これらのメソッドを使用すると、非同期コードをより読みやすくシーケンシャルな方法で記述することができます。

以上がコールバックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。