Promise

JavaScriptはコールバック関数を非同期処理のモードとして使用する.しかし,コールバック関数は非同期処理中に発生したエラーを処理することが難しく,複数の非同期処理を同時に処理することが難しく,コールバックスパイラルが発生する.
ES 6のプロセスパターンはこれらの欠点を補い,非同期処理時点の明確な表現を提供する.

プロセスの作成

new演算子を使用してPromiseコンストラクション関数を呼び出すと、プロセスが作成されます.解析、拒否関数をパラメータとして渡すexecutorというコールバック関数を受信します.

const promise = new Promise((resolve, reject) => {
  // 비동기 처리를 수행
  if (/* 비동기 처리 성공 */) {
  	resolve("result");
  } else { // 비동기 처리 실패
  	reject("failure");                          
  }
});

Promiseコンストラクション関数から入力されたコールバック関数(executor)で非同期処理を実行します.非同期処理に成功すると、コールバック関数としてのパラメータ伝達の解析が呼び出され、失敗すると呼び出しが拒否されます.
プロセスを使用して通常の非同期リクエストを送信するモードを確認します.

const promiseGet = url => {
  return new Promise((resolve, reject) => {
  	const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.send();
    
    xhr.onload = () => {
     	if (xhr.status === 200) {
          resolve(JSON.parse(xhr.response)); 
        } else {
          reject(new Error(xhr.status));
        }
    }
  });
};

prospeseGet関数は、プロセスを作成して返します.非同期処理はPromiseコンストラクション関数がパラメータとして伝達されるコールバック関数の内部で実行される.
プロセスには、非同期処理のプロセスを示すステータス情報があります.

pending-非同期処理を実行しています.これはプミス誕生後の基本状態です.

完了

-非同期処理が正常に実行されました.resolve関数を呼び出すと、このステータスになります.

拒否-非同期処理に失敗しました.拒否関数を呼び出すと、このステータスになります.

これらのプロセスにはステータス値があり、ステータスをresolve関数とrefer関数を呼び出すように変更します.
完了した拒否状態を合わせると固定状態になります成功しても失敗しても、保留中ではありません.[OK]ステータスは[保留中->]ステータスに変更され、変更後は他のステータスに変更できません.
プロセスには、非同期処理ステータスと非同期処理結果ステータスがあります.開発者ツールから次の手順を出力しましょう.

const fulfilled = new Promise(resolve => resolve(1));

PromiseStateとともに、1がPromiseResultの内部スロットに格納されていることがわかります.断っても見てみようか?

const rejected = new Promise((_, reject) => reject(new Error('error')));

これらのプロセスは、非同期処理ステータスと処理結果を管理するオブジェクトです.

Premis後続処理方法

非同期関数を処理し、プロセスステータスを完了した場合は、結果に基づいて処理するコードが必要です.断られたら、エラー処理をするべきです.このため、Promissはthen、catch、finallyを提供します.
プロセスの状態が変化すると、パラメータとして後続の処理方法に渡されるコールバック関数が選択的に呼び出されます.このとき,プロセスの処理結果はコールバック関数に引数として渡される.
後続の処理方法はすべて1つのプロセスを返し、非同期で実行します.Promisの次の処理方法を見てみましょう.

1. Promise.prototype.then

次に、メソッドは2つのコールバック関数を引数として渡します.

プロセスが完了すると、最初のコールバック関数が呼び出されます.コールバック関数は、プロセスの非同期処理結果を引数として渡します.

プロセスが拒否された場合、

コールバック関数が呼び出されます.コールバック関数は、プロセスのパラメータにエラーを渡します.

1番目のコールバック関数は非同期要求が成功したときのコールバック関数であり、2番目のコールバック関数は非同期要求が失敗したときのコールバック関数である.

new Promise(resolve => resolve("fulfilled"))
	.then(v => console.log(v), e=> console.error(e));

new Promise(resolve => reject(new Error("rejected"))
	.then(v => console.log(v), e=> console.error(e));

次に、メソッドはプロセスを返します.返される値が[基本情報](Basic Information)でない場合、既定値の[解析](Resolve)または[拒否](Reject)が作成され、返されます.

2. Promise.prototype.catch

catchメソッドは、コールバック関数を引数として渡します.catchメソッドのコールバック関数は、プロセスが拒否されている場合にのみ呼び出されます.

new Promise((_, reject) => reject(new Error("rejected"))
  .catch(e => console.log(e));

catch法の挙動はthen(Undefined,onRejected)と同じである.戻り値も当然Promiseです.

3. Promise.prototype.finally

finallyメソッドは、パラメータとしてコールバック関数を渡します.プロセスの成功または失敗にかかわらず、一度呼び出されます.この方法は、プロセスのステータスにかかわらず、共通の処理を実行する必要があるため、非常に役立ちます.同様に、常に[プロセス](Process)に戻ります.
上記の後続の処理方法を用いて,上記で定義した規則Get関数に適用する.

const promiseGet = url => {
  return new Promise((resolve, reject) => {
  	const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.send();
    
    xhr.onload = () => {
      if(xhr.status === 200) {
        resolve(xhr.response)); 
      } else {
        reject(xhr.status); 
      }
    }
  });
};

promiseGet("https://jsonplaceholder.typicode.com/posts/1")
	.then(res => console.log(res))
	.catch(err => console.error(err))
	.finally(() => console.log("처리되었습니다."));

エラー処理

創造する

プロミスの静的方法

マイクロタスクキュー