비동기처리 (콜백함수, Promise, async/await)

동기/ 비동기란?

자바스크립트는 싱글스레드이기 때문에 한 번에 하나의 작업만 수행할 수 있었고 이를 해결하기 위해 병렬 적으로 처리하는 비동기 방식이 생겨났다

 

 

동기(Synchronized)란 쉽게 설명해서 프로그램이 작성된 순서대로 실행되는 것으로 A, B, C 순서로 함수가 작성되어 있다면 함수는 반드시  A, B, C순서대로 A의 동작이 끝나면 B함수가 실행되고, B가 끝나면 C함수가 동작하는 것을 동기적 실행이라고 할 수 있다.

비동기(Asynchronized)란 동기적 실행과 달리 비동기 프로그래밍은 타임라인의 분기를 나눠서 두개이상 함수가 동시에 동작하는 것이다. 대표적인 예제로 setTimeout( )이 있는데 setTimeout( )을 쓰게 되면 기적 타임라인에서 나눠저서 독자적으로 함수를 실행할 수 있다

비동기 방식

자바스크립트에는 콜백 함수, Promise, async await 이렇게 크게 3가지 비동기 방식이 존재한다.

콜백 함수

어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 말한다

step1(function (value1) {
    step2(function (value2) {
        step3(function (value3) {
            step4(function (value4) {
                step5(function (value5) {
                    step6(function (value6) {
                        // Do something with value6
                    });
                });
            });
        });
    });
});

=>함수의 매개 변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상을 콜백지옥 이라고 말하며  가독성도 떨어진다

프로미스

프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다 실제 연산을 직접 처리해주는 것은 아니고, 해당 연산을 대리하여 결과나 실패를 처리하기 위한 처리기와 연결할 수 있도록 하는 객체이다 

• resolve(성공), reject(실패)
• new Promise객체가 반환하는 프로미스 개체는 state와 result
  처음에는 > state : pending(대기), result : undefined
  resolve(value)호출되면(성공시) > state : fulfilled , result:value
  reject(error)호출되면(실패시) > satate : rejected , result:error

=> 한 번 생성된 promise 인스턴스에 아무리 then을 사용해도 같은 결과를 보여주므로 promise를 사용하여 비동기 요청을 인스턴스로 관리한다면, callback에 로직을 추가해야되는 형태가 아니라 함수든, 외부 모듈이든 promise를 주입받아 어느곳에서나 로직을 구현할 수 있게 된다

const cofee1 = () => {
    return new Promise((res,rej)=>{
        setTimeout(()=>{
            res('1번 주문 완료');
        },1000);
    })
}
const cofee2 = (message) =>{
    console.log(message);
    return new Promise((res,rej)=>{
        setTimeout(()=>{
            res('2번 주문 완료');
        },3000);
    })
}
const cofee3 = (message) =>{
    console.log(message);
    return new Promise((res,rej)=>{
        setTimeout(()=>{
            res('3번 주문 완료');
        },2000);
    })
}
//프로미스가 연결연결되는것을
//프로미스 체이닝(Promise chaning)이라고 함
console.log('시작');
cofee1()
.then((res)=>cofee2(res))
.then((res)=>cofee3(res))
.then((res)=>console.log(res))
.catch(console.log)
.finally(()=>{
    console.log('끝');
});

async/await

Promise로 결과를 반환하며  Promise에 then메소드를 체인형식(프로미스체이닝)으로 호출하는것보다 가속성이 좋다.

Promise를 사용하지만 then, catch 메소드를 사용하여 컨트롤 하는 것이 아닌 동기적 코드처럼 반환 값을 변수에 할당하여 작성할 수 있게끔 도와주는 준다

await는 async 내부 함수에서만 사용 가능하고 Promise를 리턴하는 모든 비동기 함수 호출부 앞에 await를 붙인다.
await를 사용하면 결과값을 얻을 수 있을 때까지 기다려주어 동기적 코드 처리와 동일한 흐름으로 코드를 작성할 수 있다. =>함수 호출 후 결과값을 변수에 할당하는 것처럼 작성할 수 있다는 것이다.

const cofee1 = () => {
    return new Promise((res,rej)=>{
        setTimeout(()=>{
            res('1번 주문 완료');
        },1000);
    })
}
const cofee2 = (message) =>{
    console.log(message);
    return new Promise((res,rej)=>{
        setTimeout(()=>{
            // res('2번 주문 완료');
            rej(new Error("err.."));
        },3000);
    })
}
const cofee3= (message) =>{
    console.log(message);
    return new Promise((res,rej)=>{
        setTimeout(()=>{
            res('3번 주문 완료');
        },2000);
    })
}
console.log("시작");
//reject 에러발생시 try~catch문 이용
async function order(){
    try{
        const result1 = await cofee1();
        const result2 = await cofee2(result1);
        const result3 = await cofee3(result2);
        console.log(result3);
    }catch(e){
        //에러처리
        console.log(e);
    }
    console.log('종료');
}
order();