[Javascript] Promise와 async,await

프로미스와 async, await 공부를 하면서 async, await사용 시 코드가 간결해지는 장점이 있어서 정리해보게 되었습니다.

Promise란?

javascript es6에서 등장한 비동기 처리를 위한 작업 객체이다.
기본적으로 new Promise를 통해 promise 객체를 만든다.

Promise는 resolve를 통해 결과값을 반환하고, reject를 통해 실패 값을 반환한다.

.then()을 통해 resolve 이후의 해야할 행동을 정의하고
.catch()를 통해 reject 이후의 해야할 행동을 정의할 수 있다.

  const promise1 = (text) => {
    return new Promise((resolve, reject) => {
      if (text == "resolve") {
        // 성공 시 resolve를 통해 데이터를 리턴한다.
	  	resolve('resolve');
      } else {
        // 실패 시 reject를 통해 데이터를 리턴한다.
        reject('reject');
      }      
    });
  }
  
  // resolve 이후 해야할 작업을 정의한다.
  promise1.then(
    (data) => {
    	console.log(data)  
  	}
  );

  // reject 이후 해야할 작업을 정의한다.
  promise1.catch(
    (error) => {
     	console.log(error)
    }
  );
   

async와 await

앞서 Promise는 resolve, reject, then, catch 등 여러 작업들을 직접 분기할 수 있는 장점이 있지만 한눈에 코드가 들어오지 않는 단점이 있습니다.

이런 Promise의 단점을 보완하고 보다 읽기 쉬운 비동기처리를 만들기 위해 나온 것이 바로 async & await라고 할 수 있습니다.

인프런 기초 리액트 강좌 - 만들면서 배우는 리액트 : 기초
위 강의를 들으면서 사용된 async & await 관련 기능을 참고.

기본적으로 async는 키워드 형식으로 사용된다. 그리고 async의 return 객체는 promise 타입이다.
그리고 await를 사용하여 비동기적으로 함수를 사용할 수 있고, await 후 resolve가 된 이후 아래 코드들이 실행된다.

아래 코드를 보면 한눈에 어떻게 코드가 동작하는지 직관적으로 보여진다.

 const OPEN_API_DOMAIN = "https://cataas.com";

  // async 함수
  const fetchCat = async (text) => {
    const response = await fetch(`${OPEN_API_DOMAIN}/cat/says/${text}?json=true`);
    const responseJson = await response.json();
    return `${OPEN_API_DOMAIN}/${responseJson.url}`;
  };

  async function setInitialCat() {
    const newCat = await fetchCat('First cat');
    changeCatImg(newCat);
  }

자 이제 이 위의 코드를 Promise 형태로 바꿔보자.

await는 기본적으로 promise 형태로 수행이 되기 때문에, await에 불려지는 함수들을 promise 객체로 만들었다.

그리고 await 순서대로 코드를 수행하기 위해 then을 통해 실행 순서를 정의하였다.

  // promise 함수
  const fetchCatPromise = (text) => {
    return new Promise((resolve, reject) => {
      resolve(fetch(`${OPEN_API_DOMAIN}/cat/says/${text}?json=true`));
    });
  }

  const fetchCatJsonPromise = (response) => {
    return new Promise((resolve, reject) => {
      resolve(response.json());
    });
  }

  const setInitialCatPromise = () => {
    return new Promise((resolve, reject) => {
      const promise1 = fetchCatPromise('First Cat Promise');
      promise1.then(
        (value) => {
          const promise2 = fetchCatJsonPromise(value);
          promise2.then(
            (data) => {
              changeCatImg(`${OPEN_API_DOMAIN}/${data.url}`);
            }
          );
        }
      );
    })
  };

간단한 코드처럼 보였던 녀석이 Promise로 인해 복잡해져보인다.

비록 async, await는 Promise보다 섬세하지는 않지만 읽기쉬운 코드를 지향하는 요즘의 트렌드에 참 잘 맞는 방식인 것 같다.