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 の詳細なインストールと設定のチュートリアル

推薦する

Linux の一般的なハードディスク管理コマンドの紹介

目次1. dfコマンド2. duコマンド3. fsckファイルシステム修復コマンド4. ディスクステ...

最新の JavaScript で非同期タスクを書く方法

序文この記事では、非同期 JavaScript の進化と、それがコードの記述方法にどのような変化をも...

MySQLはmysqldump+binlogを使用して、削除されたデータベースの原理分析を完全に復元します。

1. 概要MySQL データベースの日常的な操作とメンテナンスにおいて、ユーザーが誤ってデータを削...

MySQL DML言語操作例

追加説明、外部キー: 外部キーを使用しないでください。すべての外部キーの概念はアプリケーション層で解...

CSS の複数行テキストがオーバーフローする場合の省略記号の例

複数行のテキストがオーバーフローすると省略記号が表示されますこの記事では 2 つの方法を推奨します。...

Vue プロジェクト @change 複数のパラメータを使用して複数のイベントを渡す

まず、変更イベントは 1 つだけです。 changelevel() //値を選択選択を変更して行の値...

MySQL外部キーの3つの関係例の詳細な説明

この記事では、例を使用して、MySQL 外部キーの 3 つの関係について説明します。ご参考までに、詳...

js の hasOwnProperty のプロパティとインスタンスの使用法の詳細な説明

1. js は hasOwnProperty が不正に占有されることから保護しません。オブジェクトに...

HTML 内の CSS および JS リンクのバージョン番号 (キャッシュを更新)

背景検索エンジンで「.htaccess キャッシュ」というキーワードを検索すると、ウェブサイトのファ...

mysql 5.6.21 のインストールと設定の詳細な手順

1. 概要MySQL バージョン: 5.6.21ダウンロードアドレス: https://dev.my...

MySQL 8.0.21 の最新バージョンのダウンロード、インストール、設定に関する詳細なチュートリアル

1. ダウンロード1. インストールパッケージをダウンロードするMySQL ダウンロード パス: h...

雨滴効果を実現する JavaScript キャンバス

この記事では、雨滴効果を実現するためのJavaScriptキャンバスの具体的なコードを参考までに紹介...

Apache ストレステストツールのインストールと使用

1. ダウンロードApacheの公式サイトhttp://httpd.apache.org/にアクセス...

背景のグラデーションと自動フルスクリーンを実現するCSSコード

背景グラデーションと自動フルスクリーンに関する CSS の問題編集長は CSS の開発中に致命的な問...

マウスの尾行効果を実現する JavaScript

マウス効果では、setTimeout を使用して固定時間にノードを生成し、ノードを削除し、生成された...