Promise와 async/await

Promise란?

javascript에서 비동기 처리에 사용되는 객체입니다. 실행은 되었지만 아직 반환은 되지 않은 객체 입니다.

위 이미지 내용처럼 Promise는 세가지 상태가 있습니다.

• Pending(대기) : 비동기 처리 완료가 되지 않은 상태
• Fulfilled(이행) : 비동기 처리가 왼료된 상태
• Rejected(실패) : 실패하거나 오류가 발생한 상태

Promise 사용방법

const condition = true;
const promise = new Promise((resolve,reject)=>{
  if(condition) {
    resolve('resolve');
  } else {
    reject('reject');
  }
});

위 코드 내용을 살펴보면 condition에 따라 Promise의 반환 값이 결정되고 있습니다. 값이 참이면 resolve를 호출하고 아닐시에는 reject를 호출한다. resolve한 반환 값에 대해서는 then()을 통해 결과값을 반환할 수 있고 reject의 반환값에 대해서는 catch()를 통해 반환 합니다.

resolve의 경우

 // promise가 만들어지면 executor함수는 자동으로 실행됩니다.
 // executor는 new Promise에 전달되는 함수입니다.
cosnt promise = new Promise((resolve, reject) => {
  setTimeout(()=>{
    resolve('입장해주세요');
},3000);

reject한 경우

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error('error');
           }, 3000);
});

then

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('입장해주세요');
  }, 3000);
});

promise.then(value => {
  console.log(value);
});

then은 프로미스가 정상적으로 잘 수행이 되어서 마지막에 최종적으로 resolve라는 콜백 함수를 통해서 전달한 value의 파라미터로 전달되어 들어오는 걸 볼 수 있다.

catch

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error('손님의 입장순서가 아닙니다'));
  },3000)
});

promise
.then(value => {
  console.log(value);
})
.catch(error => {
  console.log(error);
});

위와 같이 에러를 다루고 싶을 때는 promise를 사용한다.

async/await이란?

기존의 promise는 비동기 작업이 많아져도 콜백함수처럼 코드의 깊이가 길어지지 않는다는 장점이 있지만 여전히 특정 조건에 따라 분기를 나누기가 어렵고, 어떤 부분에서 에러가 발생했는지 파악하기 어렵고,프로미스 체이닝도 반복되면 가독성이 떨어져 .then 지옥이 발생할 가능성이 있습니다.

async/await은 Promise 기반으로 동작하고 프로미스의 후속 처리 메서드인 then 없이도 비동기를 동기처럼 보이도록 구현하는 방식으로 새롭게 추가된 방식이다.

async function 함수이름() {
    return 결과 값;
}

async가 붙는 함수는 항상 반환값을 resolve로 하는 Promise를 반환합니다.

async function 함수이름() {
    await 비동기 처리 메서드 이름();
}

// 또는 아래와 같이 사용한다.
const 함수이름 = async () => {
    await 비동기 처리 메서드 이름();
}

await 키워드는 반드시 async함수 내부에서만 사용해야 하고 Promise 앞에서 사용해야 한다. 만약 async 외부에서 사용하게 되면 SyntaxError가 발생한다.

await 키워드는 Promise가 Settled상태가 될때까지 대기하다가 settled 상태가 되면 프로미스의 처리 결과를 resolved 반환하고 만약 Promise 객체가 reject 된다면 이 때 예외가 발생하게 됩니다.

error를 처리할 경우에는 try-catch구문을 사용하여 예외를 처리할 수 있습니다. 이 방식은 동기 코드에서의 에러 처리와 유사한 구조입니다.

async function logoTodotitle() {
   try{
     var user = await fetchUser();
     if(user.id === 1) {
       var to do = await fetchTodo();
       console.log(todo.title);
  }
} catch (error) {
     console.log(error)
 }
}

// 또는 아래와 같이 사용한다.
const 함수이름 = async () => {
    await 비동기 처리 메서드 이름();
}

위의 코드는 실행하다가 발생한 네트워크 통신 오류뿐만 아니라 간단하 타입 오류 등의 일반적인 오류까지도 catch로 잡아낼 수 있습니다. 발견한 error객체에 담기기 때문에 에러의 유형에 맞게 에러 코드를 처리해 주시면 됩니다.