シングルスレッドしかし、開発中にネットワーク リクエストやスケジュールされたタスクに遭遇した場合、ネットワーク リクエストの終了やスケジュールされたタスクの終了を待ってから他の処理を実行すると、ページが停止してしまうため、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. package.jsonに追加する "メイン": "electr...
序文MySQL マスター/スレーブ レプリケーションは、アプリケーションの高パフォーマンスと高可用性...
目次序文1. 効果は図の通りです2. 具体的な実施手順1. Vuexの紹介2.webscoked実装...
目次1. 背景2. 複合インデックスを理解する3. 左端一致原則4. フィールド順序の影響5. 単一...
COALESCE は、各パラメータ式 (expression_1、expression_2、...、...
ナビゲーション、少量のデータテーブル、中央揃え<!DOCTYPE html PUBLIC &q...
目次フレーム最高レベルのエラー報告活発なコミュニティとチーム冗談モカ推奨プラグインVue テストライ...
質問今日、プロジェクト関数を書いていたとき、金額の統計計算を行い、単位を変換する必要がありました。そ...
目次1. 一括更新の方法コンソール出力2. フックがルーティングパラメータを取得する方法実行効果1....
v-model を使用してページング情報オブジェクトをバインドします。ページング情報オブジェクトに...
1. まず、nginxの位置情報に関する関連知識を確認しましょう1) 位置マッチング手順: ~ #波...
目次mysqldの起動方法方法 1: mysqld方法 2: mysqld_safe方法3: mys...
1. MySQLの一般的な接続INNER JOIN (内部結合、または等価結合): 2 つのテーブ...
私は長い間 CSS を使用してきましたが、Web 要素の関連属性を設定するために常に「px」を使用し...
vue-cli は stimulsoft.reports.js を使用します (ナニーレベルのチュー...