ユーザーが画面上でサーバにデータを要求した場合、サーバはいつ要求を開始しますか?
他のコードを実行しないのをずっと待つことはできません.50個のリクエストがある場合、50個のリクエストが完了するまでWebアプリケーションは正常に使用できません.このような時点で必要とされるのは非同期実行である.非同期実行を実現するためにCalback関数を用い,Calback関数の様々な欠点を補うためにPromiseが出現した.

ソースリンク

Callback

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

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

短所

の処理順序を保証するために、複数のコールバック関数がネスト(ネスト、オーバーラップ)され、複雑さが向上する.複雑なコードは上記のコールバックhellを生成し、コールバックhellの可読性が悪いのはエラーの原因

である.

の複数の非同期論理を同時に処理するには一定の限界がある.

エラー処理は限られています.

try {
  setTimeout(() => { throw new Error('Error!'); }, 1000);
} catch (e) {
  console.log('에러를 캐치하지 못한다..');
  console.log(e);
}

以上のコードの実行プロセス.
tryブロックでsettimeout関数>>1秒後にコールバック関数>>コールバック関数を実行して異常を起こす>>しかし、キャプチャされたブロックには異常はキャプチャされていません
settimeout関数は*非同期関数なので、コールバック関数が実行されるまで待つことなく、すぐに終了して呼び出しスタックから削除します.
後続tickイベント励起>>settimeout関数のコールバック関数はタスクキューに移動します>>呼び出しスタックが空の場合呼び出しスタックに移動して実行します
コードは順番に行われ、
settimeout関数が呼び出しスタックから削除されました.これはsettimeout関数を呼び出すコールバック関数がsettimeout関数ではないことを意味する.settimeout関数のコールバック関数の呼び出し元がsettimeout関数である場合、呼び出しスタックにsettimeout関数が存在する必要があります.
異常は呼び出し者方向に伝播する.ただし、settimeout関数を呼び出すコールバック関数はsettimeout関数ではないため、settimeout関数のコールバック関数で発生したエラーはcatchブロックで捉えられず、プロセスは終了します.
非同期処理関数のコールバック関数は、イベント(timer関数のtickイベント、XMLHttpRequestのreadystatechangeイベントなど)が発生したときにTask queueに移動され、呼び出しスタックが空のときに呼び出しスタックに移動されて実行される.

Promise

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つの状態

Promiseはnew Promise()によって作成され、終了するまで3つのステータスがあります.

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

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

を返す

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

1）Pending（予備）

new Promise()メソッドを呼び出すと、待機状態になります.

new Promise();

new Promise() 메서드를 호출할 때 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject이다.

```js
new Promise(function(resolve, reject) { 
	// ... 
});

2）完全充填（履行または完了）

ここでコールバック関数のパラメータ解析を実行すると、Fulfilled状態になります.

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

実行中の場合は、()を使用して処理結果値を取得できます.

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

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

3)Rejected(失敗)

new Promise()を使用してPromiseオブジェクトを作成する場合は、callback関数パラメータresolveとrejectを使用します.ここで、以下に示すように呼び出しが拒否されると失敗します.

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関数はsync関数のようにフラットな形式でコードを記述することもできる.

エラー処理

promiseAjax('GET', 'http://jsonplaceholder.typicode.com/posts/1')
  .then(JSON.parse)
  .then(render)
  .catch(console.error);

1) then

の2つのコールバック関数をパラメータとして渡します.1番目のコールバック関数は正常(完了、解析関数が呼び出し状態)に呼び出され、2番目の関数は失敗(拒否、拒否関数が呼び出し状態)に呼び出されます.

は、

Promiseを返します.

2) catch

異常(異常)(非同期処理中のエラー、メソッド中のエラー)が発生した場合に呼び出されます.

は、

Promiseを返します.

参考資料
[JavaScript]バカたちのためのPromise講座-いったいPromiseはどう書きますか?
JavaScript Promiseの簡単な理解
Promise | PoiemaWeb
JavaScript非同期処理とコールバック関数