TIL 32-非同期承諾、fetch


非同期部分は後で必ず何度か復習しなければならない.
基本的な使い方には慣れていますが、モチベーションのない感覚を完全に理解して使うことはありません.問題は解決したが,状況に応じて承諾を利用して自分でコードを書く自信はない.
私が理解している「非同期」
👉 時間差(順番)で非同期発生を制御する子供はpromise、callback、async
👉 promise、callback、asyncは機能は同じですが、フォーマットは異なります.

このコールバックコードにより、非同期とは何かがわかります.前のタスクが完了しなくても、次のタスクを実行できます.
words[0],[1],[2],[3]が順番に実行されない理由:settimeoutはランダム秒の速度でwords[0],[1],[2],[3]に戻るランダムな数字を生成する
だから毎回運行する時(毎回Enterによって)与えた秒数はすべて変化して、ずっとランダムな順序で01233201 2013 0312...このようにしてランダムに異なる出力を継続する
面接官の落とし穴に落ちないように👍
同期して実行する場合は、word[0]が完了したらword[1]に移動して作業開始▶sync+blocking
非同期で実行すると、前のタスクが完了していなくても、次のタスクを実行できます▼async+non-blocking
同期と非同期(同期vs.asynchronous)
ブロック同期(ex.電話)リクエストの結果が同時に発生→1つのタスクが完了してから次のタスクに移動する方法\JavaScript
非ブロック非同期(ex.文字)リクエストに対して結果が同時に生成されない→リクエストにブロックがない.応答は非同期領域に入る.ААААААААААААА
非同期の場合、イベントは要求に対してeventHandlerを実行します.
なぜ非同期操作を使用するのですか?
☑️ to do heavy work (network, read files)
Promise is a JavaScript object for asynchronous operation.
私がどうしても非動機を使うとき.ex)fetch(ネットワーク要求)
𕼧ABCDがある場合は、AB順でCDが何であれAB実行時にCDが何であれ非同期コールバックを書き込みます.
なぜ誤ってcatchを拒否するのですか?
1ページで、上のビデオの下にリアルタイムのコメントウィンドウ(2つのサーバがある)があります.
リアルタイムのコメントウィンドウに表示されているからといって、ページ全体が見えない必要はありません.
一つ間違えても、もう一つを正常に運転させなければなりません.

Promise
JavaScriptが提供する非同期objectの処理を支援
指定した長時間機能を実行すると、正常に実行されると、処理後の結果値が成功メッセージとともに送信されます.
機能の実行中に予期せぬエラーが発生しました

𘥪▼▼Promiseで「ok」を探す方法
PromiseプロトタイプのOKはthen()メソッドでのみ見つかります(プロトタイプセクションを参照)
だからPromiseではthen()を使わなければなりません!
1. Producer
new Promiseを作成すると、executor(コールバック関数)が自動的に実行されます.resolve「解析」と呼ばれるコールバック関数で、機能を正常に実行し、最終データを最後に渡すことができます.
resolve(1)であれば、1は加工に成功したデータである
を選択します.
const promise = new Promise((resolve, reject) => {    //Promise 라는 class는 JS에서 제공하는 object
	setTimeout(() => {
		resolve('ellie');
}, 2000);
});

▶️ 어떤 일을 2초정도 하다가 결국에는 잘 마무리해서 resolve라는 callback함수를 호출하면서 
'ellie'라는 값을 전달해주는 promise 
reject機能の実行中に問題が発生した場合は、却下を呼び出します.
const promise = new Promise((resolve, reject) => {    
	setTimeout(() => {
		reject(new Error('no network'));     // no network는 에러의 이유
 }, 2000);
});

▶️ reject는 보통 Error라는 object를 통해 값을 전달한다. (Error가 났다는 걸 의미)
▶️ Error라는 class는 자바스크립트에서 제공하는 object  


2.Promise(Consumer)の使用
利用可能.then.catch.finally駆け引き.
📌 .そして成功(resolveとともに使用)
完成した結果値を書き続けます!.then (() => {
promise.then((value) => {
// promise 값이 정상적으로 잘 수행이 된다면, then, 어떤 값(value)을 받아올거야.
  console.log(value)  
//하면, 2초 후 콘솔에 ellie가 나옴. 위에 resolve('ellie')니까.
 Promise가 잘 실행되어, 최종적으로 resolve 콜백함수를 통해 전달한 'ellie'라는 값이 value라는 parameter로 전달되어 들어온다.
})
📌 .catch→失敗(拒否とともに使用)
catchはエラーを修正するため、catchを書く前にコンソールに{catch書き込み{<完了>:undefined}を一時停止
const promise = new Promise((resolve, reject) => {
	setTimeout(() => {
		reject(new Error('no network'));      //Error라는 class는 JS에서 제공하는 object
 }, 2000);
});

promise.catch(error => {
	console.log(error);
});