非同期JavaScript

同期

同期コードとは、コードが順番に実行されることを意味します.通常、callスタックにスタックされ、メインスレッドで実行されます.
次のコードは、各ローが終了するまで実行できません.このことをBLOCKINGと言います.

非同期

非同期は同期とは異なります.非同期コードは特殊なコードにのみ適用されます.他のコードの多くは同期コードです.
例えば、setTimeoutは非同期コードとしてバックグラウンドで実行される.バックグラウンドで実行すると、他の同期コードはメインスレッドで正常に動作します.非同期コードは、同期コードBLOCKINGを含まず、non-blockingコードと呼ばれる.非同期コードはバックグラウンドで実行できますが、同期コードは他のコードを中断せずに順次実行できます.バックグラウンドでの実行が完了したら、同期コードの実行が完了するまで待機し、コールスタックに追加してコードを完了します.

img.src = 'dog.jpg';
img.addEventListener('load',function (){
  img.classList.add('fadeIn');
});

以上のコードのimg.src = 'dog.jpg'部分も非同期コードである.画像変数に画像を入れること自体がJavaScriptで非同期的に組織されています.loadイベントは、イメージのロードが完了した後に発生する必要があります.したがって、ロードイベントは、イメージのロードが完了する前に、他のloadイベントを起動することはできません.複数の非同期コードがある場合、非同期コードは他の非同期コードを待つことはありません.これは同時に実行されるコードにすぎず、どのコードがいつ終わるか分かりません.
非同期コードは、コードが終了した後に実行されるコールバック関数を引数として提供する必要があります.(ただし、addEventListenerなどのコールバック関数を受信すること自体は、非同期コードを招くことはありません.)これらのコールバック関数を使用すると、非同期コードを順番に処理できます.

地獄

LoadScript('1.js', function(){
  LoadScript('2.js', function(){
    LoadScript('3.js', function(){
      ...
  }
}

上のコードはコールバック関数を用いて非同期コードを呼び出し続け,滅亡ピラミッドと呼ばれるコールバック地獄を確立した.callback地獄には以下の欠点があります.次にフィーチャーが表示されます.

コードは三角形で、長さから短さまでです.

コードは非常に乱雑で、可読性が悪く、理解しにくい.

は、そのため、より多くのエラーが発生し、再利用しにくい悪いコードになります.

このような回復地獄を防ぐにはいくつかの方法がある.

コールバック関数をグローバルフィールドとして宣言し、分離します.

promise

...

LoadScript('1.js', loadScript2);
function loadScript2 () {
	LoadScript('2.js', loadScript3);  
}
function loadScript3 () {
    LoadScript('3.js', loadScript4);
}...

上記のコードはコールバック地獄のピラミッド構造から逸脱しているが,挙動構造は同じである.しかし、ネーミングスペースもおかしくなり、これらのコードを再利用するのは難しい.

AJAX

AJAXはAsynchronous JavaScriptとXMLの略です.XMLは、古いWeb通信ファイル拡張子です.最近はJSONファイルを使用していますが、以前はXMLを使用していました.しかし、AJAXという言葉は「送信要求」と呼ばれ、Webサーバと動的にデータを交換することができる.

API

APIは、許可されたソフトウェア間のデータ交換、すなわちソフトウェア自体にすぎない.APIは実際には非常に広く,Web開発に用いられるAPIも多い.

DOM API, Geolocation API

ユーザによって作成されたクラスはAPIであってもよい.

オンラインAPIは、ユーザがWebサーバ上で通信する一般的なAPIである.これをAPIといいます

AJAXリクエスト

XMLHttpRequest

前述したように、XMLとは、Webサーバと通信するデータ型の名前である.XMLは古いデータ型で、現在は主にJSONデータ型を使用している.
実際のXMLを使用するコード

を見ても、

に慌てないでください.

XMLコードを使用して、非同期コードがどのように実装されているかを理解する

XMLコードを見てみましょう.

const btn = document.querySelector('.btn-country');
const countriesContainer = document.querySelector('.countries');

///////////////////////////////////////

const getCountryData = function (country) {
  const xml = new XMLHttpRequest();
  xml.open('Get', `https://restcountries.eu/rest/v2/name/${country}`);
  xml.send();

  xml.addEventListener('load', function () {
    const [data] = JSON.parse(this.response);
    console.log(data);
    const html = `
    <article class="country ${data.name}">
    <img class="country__img" src="${data.flag}" />
    <div class="country__data">
      <h3 class="country__name">${data.name}</h3>
      <h4 class="country__region">${data.region}</h4>
      <p class="country__row"><span>👫</span>${(
        +data.population / 1000000
      ).toFixed(1)} people</p>
      <p class="country__row"><span>🗣️</span>${data.languages[0].name}</p>
      <p class="country__row"><span>💰</span>${data.currencies[0].name}</p>
    </div>
  </article>
    `;
    countriesContainer.insertAdjacentHTML('beforeend', html);
    countriesContainer.style.opacity = 1;
  });
};

getCountryData('uk');
getCountryData('china');
getCountryData('usa');

XMLは、XMLHttpRequestという名前のオブジェクトの作成者によって作成されたオブジェクトによって通信することができる.

xml.Open関数を使用してGet、Postを指定し、urlを使用して通信チャネルを開きます.

xml.send関数でデータを送信するとデータが送信され、受信するとloadというイベントが発生します.

xmlオブジェクトは、addEventListener関数のコールバック関数であり、addEventListener関数がデータを受信するときに行う関数です.

getCountryDataという関数を作成し、上記のすべてのプロシージャを実行し、3つのプロシージャを統一的に実行しようとします.
xmlではsendが非同期コードとして実行されます.sendはバックグラウンドで実行されるため、data = xml.send()というコードを記述することはできません.値はありませんが、入れません.dataはundefinedを返します.
通信チャンネルを開く順番は3つの国/地域です.しかし,send後loadイベントの発生順序はそれぞれ異なる.したがって、addEventListenerを使用してコールバック関数として処理された関数を表示し、受信したデータを使用してhtmlカードを作成して表示できます.
この順序はloadイベントの発生順序を示します.


ブラウザをリフレッシュするたびに、順序が変わります.非同期コードは、どのコードが遅く終わるか分かりません.これらの問題を解決する方法は콜백함수である.

Webサーバにアクセスするプロセス

ユーザーがWebサーバにアクセスする手順を簡単に説明します.

ユーザ(すなわちクライアント)は、DNSサーバに自分のアドレスを割り当てる.このアドレスはIPアドレスとポート番号であり、HTTPプロトコルは443ポートのままである.

TCP/IPソケットを接続してWebサーバと通信します.1つのチャネルとして、データはHTTPプロトコルを介してこのチャネル上に送信される.TCP/IPは、ビッグパケットを複数のパケットに分割して送受信することにより、ボトルネックデータを迅速に送受信し、到着先でビッグパケットに統合することで、データの安全管理を実現する.

クライアントはHTTPプロトコルを使用してWebサーバに要求を送信する.HTTPプロトコルの内容は次のとおりです.

startle:GETリクエスト、リクエストターゲット、httpバージョン

ヘッダー:hostなど.豊富なコンテンツ

body:POST要求に使用し、送信するデータ量が多い場合はbodyを使用する.bodyは送信されたデータのみを含む.

これらの要求に基づいて、Webサーバは要求されたデータを受信し、HTTPプロトコルに従って返信する.回答

start line:httpバージョン、ステータスコード、ステータスメッセージ

header:回答形式のheader内容

body:返信データ
これらの内容が表示されます.
httpプロトコルとhttpの重要な違いは、tlsまたはsslを使用してhttpプロトコルの暗号化を保証するかどうかです.
詳細については、OSI 7階層を参照してください.