callback
14812 ワード
synchronous vs asynchronous
synchronous
Javaschrptは同期されています.
昇格(var、関数宣言)後、コードは行ごとに同期して実行されます.
console.log('1');
console.log('2');
console.log('3');
// 1, 2, 3
asynchronous
console.log('1');
// 콜백함수: 함수를 나중에 다시 실행해준다.
setTimeout(() => {
console.log('2');
}, 1000);
console.log('3');
// 1, 3(응답을 기다리지 않고 먼저 출력), 2
Synchronous vs Asynchronous callback
Synchronous callback
// synchronous callback;
function printImmediately(print) {
print();
}
// asynchronous callback;
function printWithDelay(print, timeout) {
setTimeout(print, timeout);
}
console.log('1'); // 동기
setTimeout(() => {
console.log('2');
}, 1000); // 비동기
console.log('3'); // 동기
printImmediately(() => console.log('hello')); // 동기
printWithDelay(() => console.log('async callback'), 2000); // 비동기
// 1, 3, hello, 2, async callback
地獄体験
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');
loginUser(id, password, (user) => {
userStorage.getRoles(
user,
userWithRole => {
alert(`Hello ${userWithRole.name}, role: ${userWithRole.role}`);
},
error=> {
console.log(error);
}
);
}, (error) => console.log(error));
コールバックチェーンの問題
毒性が低下する.
エラーまたはデバッグ中にエラーが発生しました.
Reference
この問題について(callback), 我々は、より多くの情報をここで見つけました https://velog.io/@singco/ES6-비동기-처리-callbackテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol