[FE就職生存キット]第3週セッション

JSでのError処理

catch文では、主に意図的なエラー処理が行われますが、エラーがなければthrowを使用して再び投げ出し、上位エラー処理ロジックで処理する必要があります.

Errorオブジェクトを拡張して、Custom Errorオブジェクトを作成できます.

JS非同期処理

の通常のダイヤルバックでは、非同期ではいつ完了するか正確に分からないため、シーケンスが複数回呼び出されると、完了すると次が呼び出され、完了すると次が呼び出され、ダイヤルバックhelが生成されます.

Promise chainを使用する場合、コールバックを直接使用する場合よりも少ないネストと呼ぶことができます.

Promise

all:順序を保証せず、1回に複数を処理する.すべてのリクエストが成功しなければ結果は得られません.

allSettings:成功しても失敗しても、すべてのリクエストの結果が表示されます.

race:最初に完了したリクエストに結果を与えます.

Promiseでのエラー処理

次いで、

は、2番目のパラメータ関数

を使用する.

promise().then(
	() => { //success },
    	(error) => { //바로 직전의 rejected promise의 reason이 넘어온다.}
);

catch文

を使用

promise().catch((error) => { // rejected promise가 생길 때마다 넘어온다. });

async, await

ネストなしで承諾を同期させることができます.
async関数は常にPromiseを返します.

APIリクエストのキャンセル

の古いAPIリクエストをキャンセルすると、リソースを節約し、一貫したデータを提供できます.

(要求されたデータがいつ到着するか分からないため、以降のデータが無効になる可能性があります)

AbortController APIを使用してFetch API要求をキャンセルできます.

const abortController = new AbortController();
fetch(URL, { signal: abortController.signal } // signal을 두번째 인자로 넘겨준다.
abortController.abort(); // 실행되고 있는 abortController 시그널의 요청이 있다면 취소시킨다.

CORSと簡単な要求

CORS:ブラウザに他のドメイン内のリソースへのアクセス権限を付与するシステム

.

簡単な要求:CORSを実行する時、OPTIONSを必要としないで要求の要求を実行することができて、GET、POSTだけを支持して、しかもヘッドの編纂は制限があります.往復を1回に減らす.

Browserにデータを保存

セッションStorage/localStorage:イベントを格納することで、他のタブに格納されている変更を把握できます.

indexedDB

local-storage-fallback:ブラウザに基づいて適切なリポジトリを選択

APIデータキャッシュ&状態に応じたUI処理

API要求により受信したデータは、キャッシュされた特定の時間バージョン(有効期限)を使用し、データが有効期限切れであることが確認されたときに再取得される.

APIのインポート時には、ロード、完了、およびエラー状態を区別することによってUIが処理される.