Asynchronous Javascript

why Async

サーバとクライアントの概念から議論しましょう.
동기식 처리 모델(Synchronous processing mdoel)シリアルでタスクを実行します.以降のタスクがブロックされると、サーバにデータを要求し、データ応答を待つ必要がある場合は、非同期処理方式を採用します.
逆に、비동기식 처리 모델(Aynchronous processing mdoel)はタスクを並列に実行します.タスクがまだ終了していない場合でも、次のタスクが実行されます.JavaScript DOMイベントおよびTimer関数(settimeout、setInterval)、およびAjaxリクエストのほとんどは非同期処理モデルを使用していることに注意してください.

サーバからデータを受信して同期処理した場合、どうなりますか?
サーバからデータを受信するコードの実行が完了すると、後続のコードが処理され、ユーザはデータ受信の完了を待たなければならない.

Callback

パラメータが特定の関数に渡される関数として、コールバック関数が関数を渡す関数で呼び出されます.JavaScriptの非同期性を表す最も一般的な方法!

上記の2つの例を比較すると、コールバック関数が必要な理由がわかります.
でも何も見えない次に、この構造を最も簡略化する2つのコードを示します.

function test(e) {
  e() 
}; 

// (2) 아래에서 전달된 함수가 test함수 매개변수 e에 저장되고, 
// (3) e() 호출. 그 결과로 console.log 안에 '콜벡'이 출력 됨!

test(function() {
  console.log('콜백')
}); 

// (1) test라는 함수는 인수로 함수로 받음.

整理した文章を読み直して復習する
文章を整理する2-JavaScript非同期処理とコールバック関数

Promise

プロセスはJS非同期処理用のオブジェクトです.主にサーバから受信したデータを画面に表示するために使用されます.上記の方式(コールバック関数を用いる)は、ちょっとした不注意でコールバック地獄を招くため、このような問題を防止するために発生するpromiseである.
(整理された文章2に示すように)重ねて宣言されたコールバック匿名関数を各関数に分ける方式,すなわち符号化モードの変化だけでこの(コールバック)地獄から逃れることができるが,Promiseを使えばより楽に脱出(?)できる.かもしれません.

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番商品データを受信します.コールバック関数を使用する例です.このコードにpromisを適用すると、次のコードが生成されます.

`new Proimse()` `resolve()` `then()`과 같은 프로미스 API를 사용한 구조

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에 전달됨
});

プロセスの3つのステータス(status)

保留(代替):非同期処理ロジックがまだ完了していません

Fulfilled(履行済み):非同期処理を完了し、プロセスから結果値

を返す

Rejected(失敗):非同期処理失敗またはエラーステータス

Pending

下図に示すように、new Promise()メソッドを呼び出すとPending状態になります.

new Promise();

new Promise()メソッドを呼び出すと、コールバック関数を宣言できますが、コールバック関数のパラメータはresolve、rejectです.

new Promise(function(resovle, reject) {
  // ...
});

Fulfilled

ここで、callback関数を実行するパラメータresolveは、以下に示すようにFulfilled状態となる.

new Promise(function(resolve, reject) {
  resovle();
});

また、実行状態であればthen()を用いて、以下に示すように処理結果値を得ることができる.

function getData() {
  return new Promise(function(resolve, reject) {
    var data = 100;
    resolve(data);
  });
}

// resolve()의 결과 값 data를 resolvedData로 받음
getData().then(function(resolvedData) {
  console.log(resolvedData); // 100
});

また、失敗状態であれば、失敗の原因(処理失敗の結果値)をcatch()として受信することができる.

Rejected

new Promise()を使用してpromisオブジェクトを生成する場合は、callback関数パラメータresolveおよびrejectを使用して、ここでrejectを呼び出すと失敗状態(Rejected)になります.

new Promise(function(resolve, reject) {
  reject();
});

また、失敗状態であれば、失敗の原因(処理失敗の結果値)をcatch()として受信することができる.

function getData() {
  return new Promise(function(resolve, reject) {
    reject(new Error("Request is failed"));
  });
}

// reject()의 결과 값 Error를 err에 받음
getData().then().catch(function(err) {
  console.log(err); // Error: Request is failed
});

async await

やはりダイヤルバックが難しいです.
だから、現れた概念はasync waitだと思います.(大脳皮質)
基本式は次のとおりです.

async function 함수명() {
  await 비동기_처리_메서드_명();
}

ご覧のように、関数の前にasyncという定語を付けます.そして関数の内部論理でHTTP通信を行う非同期処理コードにwaitを付ける.ただし,ここでは,awaitの意味で操作するには,非同期処理方法はPromiseオブジェクトに戻らなければならない.
詳細な例と補足説明については、次のリンクを参照してください.
きちんと整理された文章