[JavaScript] 비동기작업 ASYNC AWAIT와 PROMISES

비동기작업

https://adrianmejia.com/asynchronous-vs-synchronous-handling-concurrency-in-javascript/

 

Q. 동기와 비동기적으로 일을 처리?

 

빨래, 설거지, 청소를 해야한다. 일처리에 대해서 비유를 해보자 

 

동기-> 빨래를 한 뒤(1시간), 설거지 한 뒤(1시간), 청소를 해서 일을 끝내는 것(1시간) -> 약 3시간

비동기 -> 빨래 업체한테 맡기고 (1분), 설거지 업체에 맡기고(1분), 청소하는 업체 맡기고(1분) -> 약 3분

-  순서가 중요하지 않다면 비동기적으로 업무를 실행하는 것이 맞다.   

 

 

 

Callback

- javascript는 synchronous , 하나하나씩으로 동적으로 수행

- hoistring이란? (중요, 면접에서 많이 나옴)  코드가 나타나는 순서대로 실행이 됨 

- Asynchronous? 언제 실행될지 알 수 가 없음  

- setTimeout 파라미터 안에 전달, 당장 실행하지는 않고 나중에 불러줘~ Call Back~ 

 

callback.js 

'use strict';

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

 

 

callback.js (arrow function 사용) 

'use strict';

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

 

callback은 항상 비동기일때만 쓰일까? (no) 

(1) Synchronous Callback

- 즉각적으로 실행되는 callback .

 

(2) Asynchronous Callback 

- 비동기적으로 실행되는 callback 

 

 

callback.js 

'use strict';

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

//Synchronous callback
function printImmediately(print){
    print();
}

printImmediately(()=> console.log('hello'));

//Asynchronous callback
function printwithDelay(print, timeout){
    setTimeout(print, timeout);
}

printwithDelay(()=>console.log('async callback'),2000);

 

 

 

콜백지옥 

 

callback.js 

//Callback Hell Example
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);     
    } 
);

 

Promise

- 콜백 지옥 같은 코드가 형성되지 않게 하는 방법으로 ES6 에 도입된 기능 

 

 

 

 

 

 

async/await

- Promise를 더욱 쉽게 사용할 수 있도록 해주는 ES2017(ES8)

- 함수의 앞부분에 async 키워드를 추가하고, 해당 함수 내부에서 Promise의 앞 부분에 await 키워드를 사용함

- Promise가 끝날때까지 기다리고, 결과 값을 특정 변수에 담을 수 있음 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<출처>

1. www.youtube.com/watch?v=dCJ1ngvB-po

2. www.youtube.com/watch?v=JB_yU6Oe2eE&t=24s

3.