非同期JavaScript

どうきひどうき

同期(synchronous):コードの演算は同時にプロセスとして行われます.
これは、各ローのコードが処理中のローであり、コードが順次読み出されるため、次のタスクを実行するには前のタスクを完了する必要があることを意味します.
利点:演算が直感的で、簡単です.

非同期(asynchronous):コードの演算は同時に行われるのではなく、それぞれのプロセスがあります.
すなわち,コードの進捗は同時に行われないため,各タスクには異なる目的があり,前のタスクが完了しなくても次のタスクが実行される.
利点:タスクの処理を待つ間に他のタスクを実行し、リソースを効率的に利用できます.

コールバック関数

コールバック

コールバック(callback):コールバック関数の操作方法は、レストランの予約と同じです.一般的に美食店に行く人が多くて、席がありません.だから私は名前を待機者リストに書いて、周りのレストランを回って、位置があるまでぶらぶらしました.レストランに席があれば、電話で席があると言います.電話に出る時間は、ここのコールバック関数を呼び出す時間と同じです.お客様の立場から、近くの店で買い物をしたり、レストランで席を待ったり、他のレストランの位置を知ったりすることができます.
早めに行く必要もなく、直接ホテルに入って席が空いているかどうかを確認する必要もありません.必要な操作(位置決め、特定の値の出力など)は、準備が整った時点(データが準備された時点)でのみ実行できます.

コールバック地獄

コールバック地獄は,コールバック関数を連続的に用いて非同期処理ロジックを行う際に発生する問題である.次のコードを見たことがあるかもしれません.

$.get('url', function(response) {
	parseValue(response, function(id) {
		auth(id, function(result) {
			display(result, function(text) {
				console.log(text);
			});
		});
	});
});

Webサービスを開発する場合、サーバがデータを受信して画面に表示するまで、エンコーディング、ユーザー認証などの操作を処理する必要がある場合があります.これらのプロセスがすべて非同期であると判断した場合は、コールバックでコールバックを維持し続ける形で符号化されます.以下に示します.これらのコード構造は正常に動作したり、論理を変更したりすることはできません.このコード構造をコールバック地獄と呼ぶ.

カルバック地獄を解決する方法

一般に、callback地獄を解決する方法としては、PromiseまたはAsyncを用いる方法がある.

Promiseとは?

プロセスは、主にサーバから受信したデータを画面に表示するために使用されます.Webアプリケーションを実装する場合、サーバは通常、次のAPIを使用してデータを要求および受信します.

$.get('url 주소/products/1', function(response) {
  // ...
});

上記のAPIを実行すると、サーバに「1つのデータの送信」要求が発行されます.ただし、まだデータを受け取っていない場合は、データを受け取ったかのように画面に表示しようとすると、エラーや空白の画面が表示されます.これらの問題を解決する方法の一つは「Premis」です.

承諾コード-ベース

次のコードは簡単なajax通信コードです.

function getData(callbackFunc) {
  $.get('url 주소/products/1', function(response) {
    callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
  });
}

getData(function(tableData) {
  console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});

上記のコードは、JクエリのAjax通信APIを使用して、指定されたurlから1番商品データを受信します.非同期処理を行うために,プロセスではなくコールバック関数を用いた.
プロセスを上記のコードに適用すると、コードは次のようになります.

function getData(callback) {
  // new Promise() 추가
  return new Promise(function(resolve, reject) {
    $.get('url 주소/products/1', function(response) {
      // 데이터를 받으면 resolve() 호출
      resolve(response);
    });
  });
}

// getData()의 실행이 끝나면 호출되는 then()
getData().then(function(tableData) {
  // resolve()의 결과 값이 여기로 전달됨
  console.log(tableData); // $.get()의 reponse 값이 tableData에 전달됨
});

コールバック関数で処理される構造では,新しいPromise()やResolve()やthen()などのPromise APIが用いられる.

async&awaitとは?

asyncとwaitはJavaScriptの非同期処理モードである.従来の非同期処理方法のコールバック関数とプロセスの欠点を補い、開発者が可読性の良いコードを作成するのに役立ちます.

開発者が読むのに適したコードは何ですか?

var user = {
  id: 1,
  name: 'Josh'
};
if (user.id === 1) {
  console.log(user.name); // Josh
}

これは、userという変数にオブジェクトを割り当て、条件文でユーザーのアイデンティティを確認し、ユーザー名をコンソールに書き込む簡単なコードです.
私たちはこのように上から次へと順番に読んで考えるのが気持ちがいいです.私がこのようにプログラミングを学んだからです.
async、await構文の目的は、さっき読んだ方法と理解した方法でコードを整理することです.次のハーモニーを見ましょうか?

var user = fetchUser('domain.com/users/1');
if (user.id === 1) {
  console.log(user.name);
}

fetchUser()メソッドを呼び出すと、前に見たコードのようにユーザーオブジェクトを返してみます.ここでfetchUser()メソッドがサーバからユーザ情報を取得するHTTP通信コードであると仮定すると、上記のコードはasync&await構文が適用されたものと見なすことができる.

async&awaitコード-ベース

// HTTP 통신 동작을 모방한 코드
function fetchItems() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      var items = [1,2,3];
      resolve(items)
    }, 3000);
  });
}

// jQuery ajax 코드
function fetchItems() {
  return new Promise(function(resolve, reject) {
    $.ajax('domain.com/items', function(response) {
      resolve(response);
    });
  });
}

利点:プログラム(その後()メソッドフィルタリングのチェーン呼び出しなど)を完備し,コードの可読性を向上させた.