非プロフェッショナルコード9,10週JavaScript同期と非同期の学習

👏🏻 同期と非同期

≪同期化｜Synchronize｜ldap≫:次の操作を実行するには、要求が送信された後に、要求の応答を受信する必要があります.
≪非同期｜Asynchronous｜ldap≫:応答に関係なく、リクエストを送信します.
JavaScriptは同期されています.良いニュースがあってから、私たちが書いた順番に同期して行きます.

console.log('1');
setTimeout(() => {
	console.log('2');
}, 1000);
console.log('3');

例えば、1→3→2の順に非同期で実行する.
settimeoutのような関数をコールバック関数と呼ぶ.

👆🏻 Synchronous callback

function printImeediately(print) {
	print();
}
printImmediately(()=> console.log('hello'));

上記の例を追加すると、1→3→hello→2の順に実行されます.

✌🏻 Asynchronous callback

function printWithDelay(print, timeout) {
	setTimeout(print, timeout);
}
printWithDelay(()=>console.log('async callback'), 2000);

上記の例を追加し、1→3→hello→2→async callbackの順に実行します.
片付けてください.

function printImmediately(print) {
	print();
}

function printWithDelay(print, timeout) {
	setTimeout(Print, timeout);
}

console.log('1'); // 동기
setTimeout(()=>console.log('2'), 1000) // 비동기
console.log('3'); // 동기
printImmediately(()=>console.log('hello')); // 동기
printWithDelay(()=>consoele.log('async callback'), 2000); // 비동기

実行と理解すればよい.

👿 コールバック地獄の例

class UserStorage {
	loginUser(id, password, onSuccess, onError) {
		setTimeout(()=>{
		if (
			(id === 'ellie' && password === 'dream') ||
			(id === 'coder' && password === 'academy')
		) {
			onSuccess(id);
		} else {
			onError(new Error('not found'));
		}
		}, 2000);
	}

	getRoles(user, onSuccess, onError) {
		setTimeout(()=> {
			if(user === 'ellie') {
				onSuccess({ name: 'ellie', role: 'admin' });
			} else {
				onError(new Error('no access'));
			}
		}, 1000);
	}
}

const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('enter your password');
userStorage.loginUser(id, password, (user) => {
	userStorage.getRoles(user, (userWithRole) => {
		alert(`Hello ${userWithRole.name}, you have a ${userWithRole.role} role`
		);
	}, (error) => {
		console.log(error})
	}, (error) => {
		console.log(error)}
);

🔓 callback地獄の問題

毒性低下.

エラーが発生したり、デバッグが必要になったりしても、問題を見つけるのは難しいです.

メンテナンスが困難です.

💜 出典:夢のコードby Elly https://www.youtube.com/watch?v=s1vpVCrT8f4&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=11💜