JS の 3 つの主要な問題、非同期性とシングルスレッドについて簡単に説明します。

JS の 3 つの主要な問題、非同期性とシングルスレッドについて簡単に説明します。

シングルスレッド

しかし、開発中にネットワーク リクエストやスケジュールされたタスクに遭遇した場合、ネットワーク リクエストの終了やスケジュールされたタスクの終了を待ってから他の処理を実行すると、ページが停止してしまうため、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 の関連記事をご覧ください。

以下もご興味があるかもしれません:
  • JavaScript シングルスレッドと非同期の詳細
  • シングルスレッドJavaScriptにおける非同期処理実装の詳細な説明
  • JSシングルスレッド非同期IOコールバックの特性を分析する
  • JavaScript の 3 つの山: シングル スレッドと非同期

<<:  MySQL InnoDBセカンダリインデックスのソート例の詳細な説明

>>:  CentOS7 での PostgreSQL 11 の詳細なインストールと設定のチュートリアル

推薦する

Vue プロジェクトに Electron を追加するための詳細なコード

1. package.jsonに追加する "メイン": "electr...

Docker ベースの MySQL マスタースレーブ レプリケーションを実装する方法

序文MySQL マスター/スレーブ レプリケーションは、アプリケーションの高パフォーマンスと高可用性...

Websocket+Vuexはリアルタイムチャットソフトウェアを実装します

目次序文1. 効果は図の通りです2. 具体的な実施手順1. Vuexの紹介2.webscoked実装...

MySQL複合インデックスの概要

目次1. 背景2. 複合インデックスを理解する3. 左端一致原則4. フィールド順序の影響5. 単一...

MySql COALESCE 関数の使用コード例

COALESCE は、各パラメータ式 (expression_1、expression_2、...、...

ulとliの基本的な使用法の分析

ナビゲーション、少量のデータテーブル、中央揃え<!DOCTYPE html PUBLIC &q...

Vue ユニットテストに推奨されるプラグインと使用例

目次フレーム最高レベルのエラー報告活発なコミュニティとチーム冗談モカ推奨プラグインVue テストライ...

MySQL の乗算と除算の精度の不一致の問題 (除算後の小数点以下 4 桁)

質問今日、プロジェクト関数を書いていたとき、金額の統計計算を行い、単位を変換する必要がありました。そ...

ReactHooks バッチ更新状態とルートパラメータの取得例の分析

目次1. 一括更新の方法コンソール出力2. フックがルーティングパラメータを取得する方法実行効果1....

Vueはv-modelを使用してel-paginationコンポーネントのプロセス全体をカプセル化します。

v-model を使用してページング情報オブジェクトをバインドします。ページング情報オブジェクトに...

nginx の場所に複数の Proxy_pass メソッドがある

1. まず、nginxの位置情報に関する関連知識を確認しましょう1) 位置マッチング手順: ~ #波...

MySQLの起動と接続方法の例分析

目次mysqldの起動方法方法 1: mysqld方法 2: mysqld_safe方法3: mys...

mysql 結合クエリ (左結合、右結合、内部結合)

1. MySQLの一般的な接続INNER JOIN (内部結合、または等価結合): 2 つのテーブ...

CSS3 のエラスティック レイアウトでの em の使用の概要: 1em は何ピクセルですか?

私は長い間 CSS を使用してきましたが、Web 要素の関連属性を設定するために常に「px」を使用し...

vue-cli で stimulsoft.reports.js を使用する詳細なチュートリアル

vue-cli は stimulsoft.reports.js を使用します (ナニーレベルのチュー...