ホームページ ウェブフロントエンド jsチュートリアル JavaScript 非同期呼び出しフレームワーク (パート 1 - 問題とシナリオ)_JavaScript スキル

JavaScript 非同期呼び出しフレームワーク (パート 1 - 問題とシナリオ)_JavaScript スキル

May 16, 2016 pm 06:48 PM
javascript 非同期呼び出し

問題
Ajax アプリケーションでは、XMLHttpRequest の呼び出しは非常に一般的な状況です。特にクライアント中心の Ajax アプリケーションの場合、サーバーからデータを取得する必要があるさまざまな操作は、XHR 非同期呼び出しを通じて完了します。ただし、シングルスレッド JavaScript プログラミングでは、XHR 非同期呼び出しのコード スタイルは、一般的な JavaScript コードと互換性がありません。

追加パラメータ
純粋なクライアント側の同期関数の場合、シグネチャは次のようになります。

function dive(operand1) , operand2 )

ただし、クライアント側の除算の精度に満足できないため、実行のために除算をサーバー側に転送するとします。その場合、これは XHR を呼び出す必要がある非同期関数になります。署名は次のいずれかです:
コードをコピー コードは次のとおりです:

関数分割(オペランド1, オペランド2, コールバック)
関数分割(オペランド1, オペランド2, successCallback, FailureCallback)
関数分割(オペランド1, オペランド2, オプション)


コールバック関数を渡すには、シグネチャに新しいパラメーターを導入する必要があります。関数をブロッキング同期呼び出しにするオプションはありません。

移植性
XHR を直接操作する関数は新しいパラメーターを導入する必要があるだけでなく、この複雑さは呼び出しスタックにも渡されます。たとえば、加算、減算、乗算、除算の 4 つの算術演算をカプセル化し、次の 1 つの演算インターフェイスのみを公開しました。演算子パラメータに基づいて、内部の加算、減算、乗算、除算関数を呼び出します。ただし、除算関数は非同期関数になるため、計算関数全体を非同期関数に変換する必要があります。

function Calculate(operand1, operand2, Operand2, callback)

同時に呼び出し時の時間 計算のために呼び出す必要があるスタック上の関数は、上位レベルの呼び出し関数から結果を返す必要がない場合を除き、非同期にする必要があります。

同期共存
calculate 関数は非同期関数になりますが、呼び出される加算、減算、乗算関数は、divide が呼び出されたときのみ非同期関数になります。非同期同期関数です。

これによりどのような問題が発生しますか? Calculate の呼び出し元は、この関数シグネチャを見ると、コールバック関数を渡す必要があるため、Calculate が非同期関数であると自然に考えるでしょう。しかし、calculate の実行方法は不明です。次の呼び出しを考えてみましょう:

calculate(operand1, operand2, operand2, operands, callback);
next();

これには、callback と next の 2 つの関数が含まれており、どちらが最初に実行されます。どちらが最後に実行されるか 実行は不確実であるか、または Calculate の特定の実装に依存します。

calculate の実装の場合、非同期操作が必要ない場合は、コールバックが直接呼び出されます。次に、加算、減算、乗算を実行する場合は next の前にコールバックが呼び出され、除算を実行する場合はコールバックよりも前に next が呼び出されます。

この不確実性が気に入らない場合は、calculate の実装を変更し、すべての同期呼び出しを setTimeout 形式に変更して、どのような状況でもコールバックの前に next が確実に呼び出されるようにすることができます。

ただし、後者のアプローチは高コストの実装に依存しており、開発者が誤って setTimeout を見逃して (または単なる怠惰なだけで)、関数の呼び出しシーケンスが不確実になる可能性があるため、これは関数です。フレームワークはそれを達成するのに役立ちますが、フレームワークを使用する場合にはそれを回避する方法はありません。

シナリオ
ここでは、上記の問題に関する具体的な応用シナリオを示します。 (問題を単純化するために、説明は少し変更されていますが、実際のアプリケーションとは一致しません。)

Baidu Hi Web バージョンでは、クライアントにユーザー オブジェクトのリストを保存し、このユーザーとのチャット ウィンドウ いつ、そこからこのユーザーの情報を読み取る必要があります。この操作には、同期または非同期の多くの分岐が含まれます:

ユーザー オブジェクトはキャッシュされません
ユーザー情報を非同期で読み取ります
ユーザー オブジェクトはキャッシュされます
ユーザーは友達です (情報は更新されます)サーバークライアントプッシュによって更新されます)
ユーザー情報を同期的に読み取ります
ユーザーは友達ではありません (情報の更新はクライアントから取得する必要があります)
キャッシュ情報を受け入れることができます
ユーザー情報を読み取ります同期
最新の情報を取得する必要がある
ユーザー情報を非同期で読み取る
分岐の結果が同期と非同期の両方であることがわかります。そして、これらの分岐は 1 つの関数で完了するのではなく、複数の関数で完了します。つまり、従来のモデルによれば、これらの関数の一部は同期であり、一部は非同期です。非同期の推移性により、最終的な呼び出しスタックの最上位にある関数はすべて非同期になります。

この問題を解決するには、非同期呼び出しフレームワークを作成し、統一された方法で呼び出しを行い、同期呼び出しと非同期呼び出しを 1 つの return メソッドに結合する必要があります。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript:リアルタイム監視システムを実現するためのキーテクノロジー はじめに: インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

JavaScript で HTTP ステータス コードを簡単に取得する方法 JavaScript で HTTP ステータス コードを簡単に取得する方法 Jan 05, 2024 pm 01:37 PM

JavaScript で HTTP ステータス コードを取得する方法の紹介: フロントエンド開発では、バックエンド インターフェイスとの対話を処理する必要があることが多く、HTTP ステータス コードはその非常に重要な部分です。 HTTP ステータス コードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータス コードとは何ですか? HTTP ステータス コードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが

JavaScriptでinsertBeforeを使用する方法 JavaScriptでinsertBeforeを使用する方法 Nov 24, 2023 am 11:56 AM

使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。

See all articles