非同期(Asynchronous)-3(Promise)

Calbackという強力な手段により,非同期関数の順序を制御できる.
しかしCalbackhellという致命的な欠点も現れた.
そのために設計されたのがPromiseです.

🍫 Promiseとは?

JavaScriptに組み込まれているクラス.

Calbackではなく非同期関数制御に使用されます.

特定機能を実行する場合、「成功すればそうする」「失敗すればそうする」などの機能を植え込むことができる成功失敗処理(解読)器と考えれば分かりやすい.

これがどういう意味なのかまだ分かりません.しかし、その前にPromiseはコード設計モードにすぎず、Calbackをより簡潔に表現し、順次漸進することができます.

🍫 Promiseオブジェクトの作成

クラスであるため、newキーワードを使用してオブジェクトインスタンスを作成できます.
基本的な顔は以下の通りです.

const promise = new Promise((resolve, reject) => {
  // executor 함수 본문
})

Promiseジェネレータでは、executorというコールバック関数を渡す必要があります.
これは、new Promiseの生成時に自動的に実行される.
executor関数には、JavaScriptが持つコールバック関数であるresolveとexecuteというパラメータが含まれています.この2つの役割は解読の成功と失敗の役割を果たした.

ソリューション:機能を正常に実行し、最終結果の値を呼び出します.
(解読に成功)

却下:機能の実行中に問題が発生した場合、エラーが表示され、エラー・オブジェクトが呼び出されます.
(解読失敗)

簡単に言えば、new Promiseと宣言すると、関数である因子が得られる.
この関数はexecutorと呼ばれ、Promiseの作成時に自動的に実行されます.
私たちはexecutor内でコードで私たちが望んでいる機能を書きます.
では,コード処理の成否に応じてresolveとrejectをそれぞれ呼び出す.

🍫 Promiseの3つの状態

しかし、この約束には3つの状態がある.

pending(初期default状態)

が完了しました.つまり、Promiseは解読に成功したときにfullfilled(満たされた)状態になります.

拒絶:Promiseは解読に失敗した場合に拒絶(拒絶)に変更されます.

+)fullfilledまたはrejected状態のPromiseを組み合わせて解決済み(処理)Promiseと呼ぶ.
当然ですが、このPromiseは保留中の状態で始まりますが、最終的にはexecutor関数でresolve(成功)またはexecute(失敗)の両方を呼び出して状態を変更する必要があります.
△掛け続けると意味がないのではないでしょうか.
ただし、解析(成功)または拒否(失敗)処理後、変更のステータスは変更されません.

🍫 then, catch, finally

では、Promiseオブジェクトは大体成功と失敗を判断できることを知っていますが、これはどのようにダイヤルバックのように使用することができますか?これから見る3つの代表的なPromiseprototype.使い方で可能になります.
上記で作成したPromiseオブジェクトがProducer(生産者)の角度である場合、これらの方法は、その生産者が作成したPromiseを使用するConsumer(消費者)の角度と見なすことができる.

then

Promiseが正常に処理され、「解析」が呼び出されると、解析は伝達された結果を受信し、次の必要な機能(関数)の方法を実行します.

簡単に作成したPromiseに貼り付けて、必要な機能(関数)を追加するだけです.

const promise = new Promise((resolve, reject) => {
  // ...something to do
  if (성공) resolve(value);
  else reject(new Error());
});

promsie.then((value) => {
  consolel.log(value);
})

Promise executorのresolveでは、次のように必要な値を渡すことができます.
その後、その値を直接ユーザーに渡して、新しい関数を作成できます.
ただし、resolveやrejectに値を渡す必要はありません.

Catch

Promiseが失敗して拒否を呼び出すと、伝達を拒否したエラーを受信し、エラーを処理する機能(関数)の方法が実行される.

そして使い方と同じです.

const promise = new Promise((resolve, reject) => {
  // ...something to do
  if (성공) resolve(value);
  else reject(new Error('error'));
});

promsie
  .then((value) => {
    consolel.log(value);
  })
  .catch((err) => {
    console.log(err);
  })

ただ、ここでは、作成したpromiseオブジェクトの後ろにcatchを直接書くのではなく、thenの後ろにcatchを追加することを理解していません.
これはPromiseのメソッド(then,catch,finally)がPromiseを返すので、このように接続を続けることができます.(フィルタ可能)
では、Promiseはコールバック可能であることは明らかです.以下に示すように、最初のthenコールバックでvalue 2という非承諾値を返すとどうなりますか.

const promise = new Promise((resolve, reject) => {
  // ...something to do
  if (성공) resolve(value);
  else reject(new Error('error'));
});

promsie
  .then((value) => {
    consolel.log(value);
    return value2
  })
  .then((value2) => {
    console.log(value2);
  })

この場合、promiseは自動的に満タンとみなされ、返された値がパラメータとして渡されます.

finally

Promiseの成功(解決)、失敗(拒否)の結果にかかわらず、最後の呼び出しの方法です.

の使い方はcatchと同じです.

const promise = new Promise((resolve, reject) => {
  // ...something to do
  if (성공) resolve(value);
  else reject(new Error('error'));
});

promsie
  .then((value) => {
    consolel.log(value);
  })
  .catch((err) => {
    console.log(err);
  })
  .finally(() => {
    console.log('finally');
  })

🍫 Promise.all

最後に、Promiseで役立つ方法を見てみましょう.

Promiseを含むArrayのようなパラメータを返し、結果を解決するために伝達されたすべてのPromiseを並列に処理する新しいPromise.

説明は難しいが、例を挙げると思ったより簡単だ.
複数のPromiseがあるとします.また処理時間もそれぞれ異なります.

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Hi'), 3000)
});
const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Hello'), 1000)
});
const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('안녕'), 2000)
});

この3つの異なるPromiseが解析されて機能を実行すると仮定すると、それらを1つずつコンパイルして貼り付けるのは効率的ではありません.
この時Promiseallと書いてもいいです.

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Hi'), 3000)
});
const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Hello'), 1000)
});
const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('안녕'), 2000)
});

Promise.all( [promise1, promise2, promise3] )
  .then((value) => console.log(value))

// 3초 뒤 출력 :  ['Hi', 'Hello', '안녕']

上記のように、3種類のPromiseの配列が含まれています.allのパラメータとしてPromiseを返し、各Promiseの解析値を含む配列を返します.
しかし、いずれかの案が拒否されると、案です.allが返すPromiseはエラーとともにすぐに拒否されます.

🍫 の最後の部分

Promiseにはまだ見慣れないところがありますが、まだ気分が悪いところがありますが、Calbackの符号化設計モードを補うためだけなので、熟知すればいいのです.