シングルスレッドしかし、開発中にネットワーク リクエストやスケジュールされたタスクに遭遇した場合、ネットワーク リクエストの終了やスケジュールされたタスクの終了を待ってから他の処理を実行すると、ページが停止してしまうため、js にはこの問題を解決するための非同期メカニズムが備わっています。 非同期非同期の特徴は、後続のコード実行をブロックしないことです。非同期タスクは、同期タスクが完了した後に実行されます。対照的に、同期はコードの実行をブロックします。非同期タスクのアプリケーションには、主にネットワーク要求とスケジュールされたタスクが含まれます。 非同期はコールバックによって実現され、非同期実行コードはコールバック内で実行されます。ただし、3 つのネットワーク リクエスト abc を順番に実行する必要があるなどのシナリオもあります。a のコールバックでリクエスト b を開始し、b のコールバックでリクエスト c を開始します。これにより、コールバック地獄と呼ばれる非常にわかりにくい記述方法が発生します。ページ ロジックが複雑すぎて、10 個のインターフェイスを順番に呼び出す必要がある場合、コードの可読性が非常に悪くなることを想像してください。このようなコードを他人から見ると、心の中で千匹の獣が走り回っているのを感じずにはいられません。 promise の基本的な使用法: fun1 = function(flag){とします。 新しい Promise を返します ((resolve,reject)=>{ if(フラグ){ タイムアウトを設定する(() => { 解決("成功") }, 1000); }それ以外{ タイムアウトを設定する(() => { 拒否("失敗") }, 1000); } }) } fun1(true).then((res)=>{ console.log(res) //成功 }).catch((res)=>{ コンソール.log(res) }) fun1(false).then((res)=>{ コンソール.log(res) }).catch((res)=>{ console.log(res) //失敗 }) 上記は最も単純な promise 関数です。promise 関数は Promise オブジェクトを返します。パラメータは、resolve と reject の 2 つのパラメータを受け取る関数です。この 2 つのパラメータも関数です。resolve() または reject() が実行されると、関数が返されます。 resolve() が実行されると、then() メソッドが呼び出されたときに実行され、resolve() によって返されたパラメータを受け取ります。 reject() が実行されると、呼び出されたときに catch() メソッドが実行され、reject() によって返されたパラメータを受け取ります。 上記の 3 つのネットワーク要求の問題を再実装するには、promise を使用します。 callService = function(url){ 新しい Promise を返します ((resolve,reject)=>{ axios.get(url).then((res)=>{ 解決する }).catch((err)=>{ 拒否(エラー) }) }) } 定数 url1 = "/user/url1" 定数 url2 = "/user/url2" 定数 url3 = "/user/url3" callService(url1).then((res)=>{ // 何かをする callService(url2) を返す })。そして()=>{ // 何かをする callService(url3) を返します }).then((res)=>{ // 何かをする }).catch((err)=>{ コンソール.log(エラー) }) 上記の方法を使用して再実装すると、記述層は 1 つだけになり、コールバックの層に陥ることはありません。 約束。すべて promise.all は複数のプロミスを新しいインスタンスにラップし、成功した場合は配列を返し、最初に失敗したプロミスの値を返します。 promise.all メソッドは、日常の開発で複数のインターフェースを同時に呼び出す問題に対処するのに役立ちます。 p1 = new Promise((resolve, reject) => {とする 解決('成功') }) p2 = new Promise((resolve, reject) => { とする 解決('成功') }) Promise.all([p1, p2]).then((結果) => { console.log(結果) //['成功', '成功'] }).catch((エラー) => { コンソール.log(エラー) }) 約束.レース このメソッドの機能は、複数のインターフェースを競合で実行し、より速く実行されるインターフェースを返すことです。 Promise.race([p1, p2]).then((結果) => { console.log(結果) }).catch((エラー) => { コンソール.log(エラー) }) 上記は、JS の 3 大課題である非同期性とシングルスレッドについて簡単に説明したものです。JS の 3 大課題である非同期性とシングルスレッドについての詳細は、123WORDPRESS.COM の関連記事をご覧ください。 以下もご興味があるかもしれません:
|
<<: MySQL InnoDBセカンダリインデックスのソート例の詳細な説明
>>: CentOS7 での PostgreSQL 11 の詳細なインストールと設定のチュートリアル
目次1. dfコマンド2. duコマンド3. fsckファイルシステム修復コマンド4. ディスクステ...
序文この記事では、非同期 JavaScript の進化と、それがコードの記述方法にどのような変化をも...
1. 概要MySQL データベースの日常的な操作とメンテナンスにおいて、ユーザーが誤ってデータを削...
追加説明、外部キー: 外部キーを使用しないでください。すべての外部キーの概念はアプリケーション層で解...
複数行のテキストがオーバーフローすると省略記号が表示されますこの記事では 2 つの方法を推奨します。...
まず、変更イベントは 1 つだけです。 changelevel() //値を選択選択を変更して行の値...
この記事では、例を使用して、MySQL 外部キーの 3 つの関係について説明します。ご参考までに、詳...
1. js は hasOwnProperty が不正に占有されることから保護しません。オブジェクトに...
背景検索エンジンで「.htaccess キャッシュ」というキーワードを検索すると、ウェブサイトのファ...
1. 概要MySQL バージョン: 5.6.21ダウンロードアドレス: https://dev.my...
1. ダウンロード1. インストールパッケージをダウンロードするMySQL ダウンロード パス: h...
この記事では、雨滴効果を実現するためのJavaScriptキャンバスの具体的なコードを参考までに紹介...
1. ダウンロードApacheの公式サイトhttp://httpd.apache.org/にアクセス...
背景グラデーションと自動フルスクリーンに関する CSS の問題編集長は CSS の開発中に致命的な問...
マウス効果では、setTimeout を使用して固定時間にノードを生成し、ノードを削除し、生成された...