Javascript非同期について

今日からjavascriptの非同期関連を検討しますので、ご興味のある方はご注目ください
同期非同期シリーズの文章はjavascript非同期中のコールバックjavascript非同期とpromisejavascript非同期のPromiseを推薦する.all()、Promise.race()、Promise.finally()javascript非同期のPromise.resolve()、Promise.reject()javascript非同期のPromise thenとcatch javascript非同期のasync(一)javascript非同期のasync(二)javascript非同期実戦javascript非同期総括アーカイブ
js非同期とは?
JavaScriptの単一スレッドを知っています.これはその用途と関係があります.ブラウザスクリプト言語としてJavaScriptの主な用途は,ユーザとのインタラクション,およびDOMの操作である.これは、単一スレッドのみであることを決定します.そうしないと、複雑な同期問題をもたらします.たとえば、JavaScriptには2つのスレッドが同時に存在し、1つのスレッドがあるDOMノードにコンテンツを追加し、もう1つのスレッドがこのノードを削除したと仮定すると、ブラウザはどのスレッドを基準にすべきですか?「単一スレッド」とは、一度に1つのタスクしか完了できないことを意味します.複数のタスクがある場合は、キューに並ばなければなりません.前のタスクが完了し、後のタスクが実行されます.このモードの利点は実現が比較的簡単で、実行環境が比較的単純であることである.悪い点は、1つのタスクが長い限り、後ろのタスクは列に並んで待たなければならず、プログラム全体の実行を遅らせることです.一般的なブラウザは応答がなく(偽死)、Javascriptコードが長時間実行されているため(例えばデッドループ)、ページカード全体がこの場所にあり、他のタスクが実行できないことが多い.ajaxの同期要求は、ブラウザのUI(ボタン、メニュー、スクロールバーなど)をロックし、すべてのユーザーのインタラクションをブロックするため、ブラウザに偽死を生じさせます.jqueryのajaxには、特に要求されたデータ量が大きい場合は、同期要求を使用しないようにする同期要求の機能があります.いくつかの栗を挙げて非同期のバックグラウンドインタフェースを感じてeasy-mockを使って、公式の住所:https://easy-mock.com/ajaxaxiosを使用すると、基本コードは次のとおりです.

  
  
  
  
  



    
  
    {
      let myData = null
      //ajax  
      function ajax() {
        axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/mock')
          .then(data => {
            console.log("ajax    ");// handle success
            myData = data.data
            console.log(myData);

          })
          .catch(error => {
            // console.log(error); // handle error
            console.log("ajax    ");
          })
      }
    }
  

いくつかのjsを追加することで効果を見てみましょう
非同期-タイマー

      console.log(myData);
      setTimeout(() => {
        console.log('   ');
      }, 2000);
      console.log(myData);

出力、何の懸念もないはず

//null
//null
//   

実行順序:最初のconsoleを先に実行する.log(myData);そしてタイマーに出会って、タイマーを掛けて(このタイマーを一時停止した)2番目のconsoleを実行し続けた.log(myData);実行できるjsコードがなく、後で保留中のタスクを実行し続け、次の栗を見続けます.
非同期ajax

      console.log(myData);
      ajax()
      console.log(myData);

出力を見ても懸念はない

//null
//null
//ajax    
//{success: true, data: {…}}(         ，             ，         ，    )

実行順序は上記のタイマと基本的に類似しており、ここでは省略する.2つの栗を合わせてみましょう

      console.log(myData);
      ajax()
      setTimeout(() => {
        console.log('   ');
      }, 2000);
      console.log(myData);

出力、

//null
//null
//ajax    
//{success: true, data: {…}}
//   

問題は見つかりましたか?2つの非同期関数が出会って、先に誰を実行しますか?誰が速く走ったら先に誰を実行しますか?これは別の知識点を引き起こしています
タスクキューとイベントループ
2つのコンソール.log(myData);同期実行であり、jsのプライマリ・スレッド上で実行され、プライマリ・スレッドの外にタスク・キューが存在します.タスク・キューには非同期実行が必要な内容が格納されています.プライマリ・スレッドが実行されると、タスク・キュー内のタスク(タスク・キューが空になるまで繰り返しスキャン)が実行されます.
このコードを観察

      console.log(1);
      setTimeout(function () {
        console.log(2);
      }, 1000);
      console.log(3);

出力:1,3,2、これは何の説明もありません.もう1段のコードを見てください.

setTimeout(function(){console.log(1);}, 0);
console.log(2);

出力:2,1,どうしてこんなことになったの?console.log(2);メインスレッドでは、settimeout(function(){console.log(1);}を先に実行します.0);タスクキューに配置され、メインスレッドの実行が完了した場合にのみタスクキューの内容が実行されます.
なぜメインスレッドのタスクが実行された後、タスク列の内容を絶えずスキャンする必要があるのでしょうか.
このコードを見ると、あなたの理解に役立ちます.

      console.log(myData);
      ajax()
      setTimeout(() => {
        console.log('   ');
      }, 2000);
      console.log(myData);
      const btn = document.querySelector('button')
      btn.onclick = () => {
        console.log("   ");
      }

buttonボタンにクリックイベントを追加し、ブラウザをリフレッシュしながらボタンをクリック操作(もちろん手動クリック)し続け、出力を見ています.

//null
//null
//(10   )   
//ajax    
//{success: true, data: {…}}
//   
//   

これにより、プライマリ・スレッドがタスク・キューをループ・スキャンする理由が理解できますか?イベントループの各ラウンドをtickと呼びます(vueのnextTickを連想しますか?)ユーザインタラクション(マウスクリックイベント、ページスクロールイベント、ウィンドウサイズ変更イベントなど)、ajax、タイマ、タイマなどが発生すると、イベントループ内のタスクキューにイベントが追加され、実行が待機します.
フロントエンドの非同期シーンは何ですか?

タイミングタスク:settimeout,setInverval

ネットワークリクエスト:ajaxリクエスト、imgピクチャのダイナミックロード

イベントバインドまたはDOMイベントと呼ばれます.例えば、クリックイベントは、いつポイントするか分かりませんが、クリックする前に、私は何をすべきか、それとも何をすべきか分かりません.addEventListenerで1つのタイプのイベントを登録すると、ブラウザは別のモジュールでこれを受信し、イベントがトリガーされるとブラウザのあるモジュールは、対応する関数を非同期キューに投げ込み、現在実行スタックが空であれば、この関数を直接実行します.

ES 6のPromise

非同期が必要な場合:

待ちが発生する可能性がある場合

.

待機中にalertのようにプログラムをブロックできない場合

したがって、すべての「待機状況」は非同期

を必要とする.
一言でまとめると待つ必要があるがプログラムをブロックできない場合は非同期を使用する必要がある
非同期と並列
非同期と並列を混同してはいけない.非同期は単一スレッドであり、並列はマルチスレッドの非同期である.メインスレッドのタスクは同期的に実行され、タスクキュー内の非同期タスクを順次実行する.2つ以上のイベントチェーンは時間とともに交互に実行され、より高いレベルから見ると、同時に実行されるように(任意の時点で1つのイベントのみが処理されるにもかかわらず)
テキストリンク
参照リンクjsの同期と非同期と単一スレッドについて--いつ非同期が必要か、フロントエンドが非同期のシーンJavascriptを使用して非同期プログラミングする4つの方法