[ JavaScript 총정리 10 ] Asynchronous Callback (비동기 처리 콜백함수)
22442 단어 JavaScriptJavaScript
Asynchronous Callback
JavaScript는 동기적 언어로써, 호이스팅이 된 이후부터 코드가 순서에 맞게 하나씩 동기적으로 실행된다. 이 때 API를 사용하여 일정한 시간이 지나면 내가 지정한 콜백함수가 실행되도록 하면, 시간차로 인한 비동기적 실행이 이루어진다.
일반코드 비동기 실행
<script>
console.log('1');
setTimeout(()=> console.log('2'), 1000);
console.log('3');
// 결과 : '1'출력 > '3'출력 > (1초뒤) '2'출력
</script>
콜백함수 비동기 실행
<script>
function printWithDelay(print, timeout){
setTimeout(print, timeout);
}
printWithDelay(()=> console.log('async callback'),2000);
// 결과 : 2초 뒤에 'async callback' 출력
</script>
Callback Hell
😵💫 콜백지옥 경험하기!
- 사용자에게 id, password를 입력받아온다.
- 입력받은 내용으로 서버에 로그인한다.
- 로그인한 사용자의 id를 다시 받아온다.
- id로 Role(역할)을 다시 요청해서 받아온다.
- 이 Role을 이용해서 사용자의 오브젝트(name, role)를 출력한다.
<script>
// Class 생성하기
class UserStorage {
loginUser(id, password, onSuccess, onError){
setTimeout(()=> {
if(
(id === 'yura' && password === 'hey') ||
(id === 'Jenice' && password === 'hello')
){
onSuccess(id);
} else {
onError(new Error('not found'));
}
},2000);
}
getRoles(user, onSuccess, onError){
setTimeout(()=> {
if(user === 'yura'){
onSuccess({name: 'yura', role: 'student'});
} else {
onError(new Error('no access'));
}
},1000);
}
}
// 사용자 id, password 받아오고 role을 출력하는 Logic
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)
}
);
</script>
- id와 password를 차례대로 입력하면 다음과 같은 메세지가 뜬다~!
📌 추가) Promise를 이용해서 어엄청 간단하게 리팩토링하기!
<script>
class UserStorage {
loginUser(id, password){
return new Promise((resolve, reject) => {
setTimeout(()=> {
if(
(id === 'yura' && password === 'hey') ||
(id === 'Jenice' && password === 'hello')
){
resolve(id);
} else {
reject(new Error('not found'));
}
},2000);
});
}
getRoles(user){
return new Promise((resolve, reject) => {
setTimeout(()=> {
if(user === 'yura'){
resolve({name: 'yura', role: 'student'});
} else {
reject(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)
.then(user => userStorage.getRoles)
.then(user => alert(`Hello ${user.name}, you have a ${user.role} role`))
.catch(console.log);
</script>
😵💫 콜백지옥 경험하기!
- 사용자에게 id, password를 입력받아온다.
- 입력받은 내용으로 서버에 로그인한다.
- 로그인한 사용자의 id를 다시 받아온다.
- id로 Role(역할)을 다시 요청해서 받아온다.
- 이 Role을 이용해서 사용자의 오브젝트(name, role)를 출력한다.
<script>
// Class 생성하기
class UserStorage {
loginUser(id, password, onSuccess, onError){
setTimeout(()=> {
if(
(id === 'yura' && password === 'hey') ||
(id === 'Jenice' && password === 'hello')
){
onSuccess(id);
} else {
onError(new Error('not found'));
}
},2000);
}
getRoles(user, onSuccess, onError){
setTimeout(()=> {
if(user === 'yura'){
onSuccess({name: 'yura', role: 'student'});
} else {
onError(new Error('no access'));
}
},1000);
}
}
// 사용자 id, password 받아오고 role을 출력하는 Logic
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)
}
);
</script>
📌 추가) Promise를 이용해서 어엄청 간단하게 리팩토링하기!
<script>
class UserStorage {
loginUser(id, password){
return new Promise((resolve, reject) => {
setTimeout(()=> {
if(
(id === 'yura' && password === 'hey') ||
(id === 'Jenice' && password === 'hello')
){
resolve(id);
} else {
reject(new Error('not found'));
}
},2000);
});
}
getRoles(user){
return new Promise((resolve, reject) => {
setTimeout(()=> {
if(user === 'yura'){
resolve({name: 'yura', role: 'student'});
} else {
reject(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)
.then(user => userStorage.getRoles)
.then(user => alert(`Hello ${user.name}, you have a ${user.role} role`))
.catch(console.log);
</script>
🌱 Dream Coding 의 내용을 정리하였습니다. :)
Author And Source
이 문제에 관하여([ JavaScript 총정리 10 ] Asynchronous Callback (비동기 처리 콜백함수)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@roong-ra/JavaScript-총정리-10-Asynchronous-Callback-비동기-처리-콜백함수저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)