[JavaScript] 비동기 호출 - callback, promise, async & await ( 내용 추가 예정 )

---

 

callback

- 다른 함수의 실행이 끝난 뒤 실행되는 함수 ( 매개변수 값으로 들어가는 함수이기 때문 )

- 코드를 통해서 호출되는 게 아니라 등록만 해놓고 어떤 이벤트가 발생하거나 특정시점에 도달했을 때 시스템에서 호출하는 함수

 

 

js에서 사용하는 이유

- 이를 사용하면 비동기적 프로그래밍을 할 수 있기때문

- js는 싱글 스레드를 이용하기에 요청에 대한 답이 없으면 다음 작업으로 넘어갈 수 없다는 문제가 있는데 이를 해결하기 위해 사용

   즉 blocking을 방지하여 싱글 스레드가 nonBlocking으로 동작하게 한다.

 

 

비동기 처리가  가능한 이유 

- js는 이벤트 루프만 실행하지 않고 웹 브라우저나 node.js 같은 멀티 스레드 환경에서 실행되기에

동시성을 보장하는 비동기 작업은 js 엔진을 구동하는 웹 브라우저나 nodejs에서 담당한다.

 

 

 

---

 

promise

- js비동기처리에 사용되는 객체

 

callback함수가 아닌 promise를 사용하는 이유

- callback함수의 경우 에러/예외처리가 어렵고, 중첩으로 인한 복잡도 증가 (콜백지옥)라는 단점을 해결할 수 있기 때문이다.

- 물론 callback을 대체하진 못하지만 callback을 예측가능한 패턴으로 사용할 수 있게 한다.

 

 

 

---

 

async & await

- 비동기식 코드를 동기식으로 표현하여 간단히 나타내는 것으로 이를 위해하기 위해 callback과 비교해 보자

 

아래의 코드는 callback을 사용한 코드로 코드의 순서는 othercode1 -> othercode2 -> find() 순으로 실행된다.

이유는 Video.find()는 DB에서 데이터를 찾아오라는 요청을 보내기에 이 요청에 대한 응답이 오기까지

다른 작업을 ( other2 ) 먼저 처리하기 때문이다.

const f1 = () => {

    othercode1
    
    //callback : (error,videos)=>{}
    Video.find({},(error,videos)=>{
       //예외처리
        if(error){

        }
        else{
            
        }
    })
    
    othercode2
    
}

 

 

그러나 async & await를 사용하게되면 코드 실행 순서를 조절할 수 있는데

await으로 인해서 DB에 보낸 요청에 대한 응답이 올 때까지 async로 선언된 함수 내의 다른 코드들은 대기해야 하기 때문이다.

 

그렇다면 await으로 인해 이외의 다른 함수들도 처리를 비동기로 못하는 걸까?

그건 아니다. async로 선언되어 있기 때문에 다른 함수들은 await의 작업이 끝나기 전에 작업이 가능하다.

즉 async을 이용해 비동기처리를 하고 await으로 함수 내의 코드 실행 순서를 조절할 수 있는 것이다.

const f2 = async() => {

    othercode1
    
    //예외처리
    try{
        await Video.find({})
        render
    }
    catch(error){

    }
    
    othercode2
    
}

 

 

promise가 아닌 async & await을 사용하는 이유

- promise는 callback의 단점을 보완했지만 코드가 장황하다는 단점을 가졌고 이를 해결하기 위해 async&await을 도입

- async & await 도 promise 객체를 반환하기에 then() 사용 가능하다.

 

 

 

 

 

[ 참고문헌 ] 

https://velog.io/@ahsy92/%EA%B8%B0%EC%88%A0%EB%A9%B4%EC%A0%91-%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%98%B8%EC%B6%9C-callback-promise-asyncawait%EC%9D%98-%ED%8A%B9%EC%A7%95%EA%B3%BC-%EC%B0%A8%EC%9D%B4%EC%A0%90

 

 

---