コールバック関数?📞 🔙 🗂

定義＃テイギ＃

関数のパラメータが関数である場合、パラメータとして受信される関数をコールバック関数と呼ぶ.
通常、コールバックモードを使用して非同期を処理します.
これも、あるイベントが発生したり、ある時点に達したりしたときにシステムが呼び出す関数です.

Calback関数を使用する場合

1.ユーザーイベントの処理

window.addEventListener('keydown', e => {
	// 로직
});

ブラウザ画面で発生するユーザーイベントは予知できません.
したがって、これらのスクリーンイベントを管理するやつには、特定のイベントが発生したときに呼び出したいコンテンツをcallback関数に渡します.
2.ネットワーク応答の処理
画面側がサーバに要求すると、応答がいつ受信されるか分かりません.
したがって,これらのサーバに対する応答処理なども非同期処理が必要である.
3.一般関数の呼び出し(sync callback)

///1
function showMessage(msg, closeFn) {
	// 로직
	
	closeFn(true);
}

///2
[1,2,3].map(el => el*2);

4.時間遅延を意図的に使用する機能
settimeoutは、コールバック関数の実行遅延をミリ秒指定する内蔵関数です.

setTimeout(function(){ 
	alert("Hello"); 
}, 3000);

地獄💢💢💢💢💢

コールバック地獄(callback hell)とは,コールバック関数を匿名関数として伝達する過程が繰り返され,コードのインデント度合いが耐え難い程度に深まる現象である.主にイベント処理やサーバ通信などの非同期タスクを実行するためであるが,この形式はしばしば現れるが,可読性が悪いためコードの修正が困難である.

YERIの講義を聞いているうちに、以前はjQueryを通じてcallback地獄になっていた論理が見られる.
(async/awaitがない場合...承諾がない場合、XMLhttpRequestという内蔵オブジェクトを使用してapiを呼び出しました...)

ええと、これは何のコードですか。😭

これはカタログページで、カタログ情報と後期情報を一緒に表示する論理を実現しています.
バックグラウンドにAPIに入っているものは、カタログが分かれていて、後期には別々のAPIです.

カタログを持ってきてください.

がもたらすカタログでは、その商品の後期apiが最初の商品のidで呼び出される.

インポートの後期では、インポート賛数のapiが最初の後期のidで呼び出される.

$.get('https://api.test.com/proudcts', function(response) {
	var firstProductId = response.products[0].id;

	$.get('https://api.test.com/proudct/comments?id='+firstProductId, function(response) {
		var firstCommentId = response.comments[0].id;
	
		$.get('https://api.test.com/proudct/comment/likes?id='+firstCommentId, function(response) {
			var likes = response.likes;
			var likesCount = likes.length;

			// 첫번째 상품의 -> 첫번째 후기의 좋아요 수 화면에 적용!
		});
	});
});

以前は本当によく见た和弦だったのですが...

前述したように,記述コードの可読性が悪く,メンテナンスが困難である.

callback地獄を脱出する方法!!🧐

非同期タスクを実行するために、Promise、Generator、async/awaitなどを使用して、匿名関数としてコールバック関数を伝達する過程で発生するコールバック地獄を防止することができます.

👇async/awaitを使用して匿名関数を記名関数に変換します。

(async () => {
	try {
	  let productResponse = await fetch('https://api.test.com/proudcts');
	  let firstProductId = productResponse.products[0].id;

	  let commentResponse = await fetch('https://api.test.com/proudct/comments?id='+firstProductId);
		let firstCommentId = commentResponse.comments[0].id;

	  let likeResponse = await fetch('https://api.test.com/proudct/comment/likes?id='+firstCommentId);
		let likesCount = likeResponse.likes.length;
	} catch(error) {
		console.log(error);
	}
})();