[10.12] Promise

Promise

「Promise」とは?(非同期処理について)
なぜPromiseが必要なのですか?
Promiseの形式と3つの状態
⛼Promiseフィルタとcallback関数の違い

🤙🏼 Promiseとは?

JavaScript非同期処理のためのオブジェクトといえる.
ここではまず非同期処理について議論します.
特定のコードの完了を待つのではなく、まず以下のコードを実行するJavaScriptの特性をと見なすことができます.

🤙🏼 なぜPromiseが必要なのですか?

これは私が今回のプロジェクトで実際に経験したgetリクエストで、受け取ったデータをグラフに表示したときに発生したエラーです.
axios.get()リクエストでデータの受信を行い,処理を行った.
コードを作成した後、データをよく受信できますが、リフレッシュすると画面に以下のエラーが発生します.

コンソールでは、対応するグラフごとにundefined、空の配列、または空のオブジェクトが先に表示され、データが転送されます.もちろん、画面にエラーが発生します.

私の場合、usState()状態で、リクエストのデータ型を詳細に加え、undefined||dataの値で条件を加えると、エラーは発生しません.そしてこれが非同期処理の問題であることに気づいた.
理論を勉強するだけで、実際に出会って、本当に困っています.
Promiseは、実際のデータを準備したときに受け取ったデータのみを表示します.
上述したように、サーバ上でデータを送信および受信する際にpromiseを使用するのは、非同期処理により未定義のコンテンツが先に破棄され、画面にエラーが発生することを防止するためである.

🤙🏼 Promise形式と3つの状態

Promiseは、受信するデータの関数でnew Promiseを宣言し、3つのステータスに基づいて結果を表示します.
new Promiseがデータを受信したときに示す決意で、データを受信できずにエラー処理を行うと、コールバック関数として拒否を受け入れる.

new Promise(function(resolve, reject) {
  //받아오는 상태에 따른 값 작성
});

3つの状態は以下の通りです.
1.Pending:new Promise()に書き込み、または非同期処理ロジックがまだ完了していない場合にのみ発生します.
2.Fulfilled:非同期処理ロジックが完了したことを示し、結果として表示できます.この場合、newPromiseのresolveコールバック関数を宣言できます.
3.Rejected:非同期処理ロジックにエラーが発生し、正常に受信できないことを示します.「拒否」(new Error(「err msg」)を記述できます.
データはステータスに応じてコールバック関数として表示され、画面に表示されます.
then().catch()処理が必要です.

function getData() {
  return new Promise(function(resolve, reject) {
    $.get('http://localhost:3000/sample', function(response) {
      if (response) {
        resolve(response);
      }
      reject(new Error("Request is failed"));
    });
  });
}

getData()
  .then((res)=>{console.log(res)})
  .catch((err)=>{console.log(err)})

🤙🏼 Promiseフィルタとcallback関数の違い

これはPromiseの特徴で、then()を接続して使用することができます.
a,b,cという各関数に適応するために、情報が非同期で実行される必要がある場合.

function a = () => {return new Promise({...}
function b = () => {return new Promise({...}
function c = () => {return new Promise({...}

getData()
  .then(a)
  .then(b) 
  .then(c) 

簡単な方法で表現できます.
では、同じように必要なデータのみを受信して実行するcallback関数とはどのような違いがあるのでしょうか.

👿 地獄

これは、非同期処理に必要なデータロジックの接続と書き込みを継続する際に発生する問題です.

$.get('http://localhost:3000/sample', function(res) {
	a(res, function(data1) {
		b(data1, function(data2) {
			c(data2, function(data3) {
				d(data3, function(data4) {
				  console.log(data4);
			    });
			});
		});
	});
});

上記のコードに比べて可読性が悪く,誤りを訂正する際にも論理を訂正することが困難である.