비동기 처리 방법 Promise

비동기가 발생하는 다양한 경우가 존재하지만 백엔드에서 가장 많이 접하는 비동기는 바로 query를 사용할 때입니다.

비동기로 처리를 하면 처리 속도가 빨라지니까 무조건 사용하는 게 좋을까요? 비동기처리를 한다고 해서 무조건 다 좋은 것만은 아닙니다. 왜냐하면 비동기 처리 시에도 문제점이 존재하기 때문이죠. 그렇다면 어떤 문제가 발생을 할까요?

let data;

setTimeout(()=>{
    data = 10
},1000)

let value = data * 10
console.log(value)

비동기 동작을 위해서 setTimeout을 이용하여 data값을 입력받고 그 값으로 value 값을 구하는 코드를 작성을 해보았습니다. 이때 우리가 예상하는 value 값은 얼마인가요? 100이라고 생각할 수 있는데요 실제 값은 100이 아닌 NaN값이 나오게 됩니다. 왜냐하면 setTimeout이 동작하는 1초동안에 value값을 계산한것이기 때문에 data 값이 존재 하지 않은 상태에서 10을 곱한것이기 때문입니다. 이처럼 비동기임에도 불구하고 순서를 맞춰주어야 할 경우에는 비동기를 동기 처리를 해주어야 합니다.

 

어떻게 해야 비동기를 동기 처리 할수 있는지 알아봅시다.

• 콜백함수
• promise
• ES2017 promise => async / await

---

Promise

promise 도입 이전에는 콜백함수로 비동기를 동기처리하였는데요. 하지만 콜백지옥이라고 불리는 단점이 존재했습니다. 때문에 ES6부터 비동기 처리를 위한 패턴으로 Promise를 도입하였는데요. Promise는 콜백함수의 단점을 보완하면서 비동기 처리 시점을 명확하게 표현할 수 있는 장점이 존재했습니다. 

 

Promise 객체

const promise = new Promise((resolve, reject)=>{});

promise 안에서의 동작을 진행한 후에 성공하면 resolve, 실패하면 reject를 반환을 해주는 구조로 무조건 resolve()나 reject () 둘 중 하나는 호출합니다.

 

then() 메서드

let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("완료!"), 3000);
});

위와 같은 코드를 작성했다고 했을 때 결과를 어떻게 확인을 할 수 있을까요? 

바로 then 메서드를 이용하는 것입니다. then은 promise가 성공/실패 여부 상관없이 then을 사용하면 됩니다.

이때 then은 매개변수로 then(성공 시 동작할 콜백함수, 실패 시 동작할 콜백함수)를 받습니다.

promise.then(
    (result)=>{// 성공시 동작하는 콜백함수
        console.log(result)
    },
    (err)=>{// 실패시 동작하는 콜백함수
        console.log(err)
    }
)

 

catch() 메서드

let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("완료"), 3000);
  reject(new Error("reject"));
})
  .then((result) => {
    console.log(result);
  })
  .catch((e) => console.log(e + "!!!!!"));

catch 메서드는 error를 잡을 때 사용되는 메서드로 then의 두 번째 매개변수와 동일하게 동작합니다.

 

promise의 체이닝 기법

let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("완료"), 3000);
})
  .then((result) => {
    console.log(result);
    return result + "!!!!!"
  })
  .then((result) => {
    console.log(result);
  })

promise의 체이닝 기법은 콜백지옥을 처리하는 방식 중 하나로 then을 계속 이어서 비동기 처리를 해줄 수 있습니다. 이때 다음 then으로 값을 넘기기 위해서는 return을 해주어야 합니다. 그리고 이때 콜백함수는 resolve 콜백함수는 resolve 콜함수로 reject 콜백함수는 reject 콜백함수로 연결이 되는 것을 알 수 있습니다.