동기적 통신과 promise

도입

javascript에서의 코드는 동기적으로 동작합니다. 동기는 결과를 받아야 다음 코드로 넘어가는 것이고, 비동기는 결과의 반환과 상관없이 다음 코드로 넘어가는 것을 의미합니다.

 

동기적으로 작동한다는 말은 다음과 같이 동작함을 의미합니다.

function a(){
    console.log('a')
}

function b(){
    console.log('b')
}

a()
b()

a
b

문제 상황

a 라는 값을 바로 출력하는게 아니라, 아래와 같이 약간의 시간지연 이후에 출력하고 싶다고 해보겠습니다.

순서는 유지해서 2초 있다가 a가 출력되고, 이후에 b가 출력되게 하고 싶습니다.

function a(){
    setTimeout(()=>{
        console.log('a')
    },2000)
}

function b(){
    console.log('b')
}

a()
b()

b
a

위의 코드 역시 동작은 순차적으로 작동합니다. 

그러나 문제는, b가 먼저 출력되고 이후에 a가 출력된다는 것입니다.

Promise // async - await

순차성에 대한 해결은 promise를 이용해서 해결할 수 있습니다. 

function a(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('a')
        },2000)
    })
}

function b(){
    console.log('b')
}

function c(){
    let promise = a()
    promise.then((message)=>{
        console.log(message)
        b()
    })
}

c()

promise는 값이 준비되면 resolve를 통해 return 합니다.

 

아래와 같이 async-await을 이용해서 해결할 수도 있습니다.

function aa(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("aa")
        },3000)
    })
}

function bb(){
    console.log("bb")
}

async function dd(){
    let value = await aa()
    console.log(value)
    bb()
}

dd()

aa
bb

 

---

javascript 동기, 비동기 설명
https://velog.io/@jiwon/Javascript%EB%8A%94-%EB%8F%99%EA%B8%B0%EC%9D%BC%EA%B9%8C-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%9D%BC%EA%B9%8C

callback
https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/