async await로 Promise, 콜백코드를 더 깔끔하게

async await 란

async와 await는 자바스크립트의 비동기 처리를 위한 ES7(ES2017) 문법이다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와준다.

async await 기본구조

함수 fuction앞에 async를 붙여주면 async function이 되며 함수내에서 await를 사용할 수 있다. await를 사용하여 접근한 Promise는 fulfilled값을 리턴한다. rejected값에 접근하기 위해서는 try, catch문을 이용하여 접근할 수 있다.

function api(promiseName, sec) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (typeof promiseName === "string" && typeof sec === "number") {
        resolve(`${promiseName} Promise 작업이 ${sec}초 걸렸습니다.`);
      } else {
        reject(`${promiseName} Promise 작업 실패`);
      }
    }, sec * 1000);
  });
}

const aPromise = api("a", 1); // pending

const asyncFunction = async function () {
  try {
    const result = await aPromise; >>> Promise
    console.log(result);
  } catch (err) {
    console.log(err);
  }
};

asyncFunction();

익명 즉시실행 함수

Promise를 async await를 이용하여 접근할 때 async function을 따로 선언하지 않고 익명 즉시 실행함수로 실행하는것도 방법 중 하나이다. 이때 주의 할 점은 즉시실행함수는 ; 코드의 끝을 알려줘야 한다.

function api(promiseName, sec) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (typeof promiseName === "string" && typeof sec === "number") {
        resolve(`${promiseName} Promise 작업이 ${sec}초 걸렸습니다.`);
      } else {
        reject(`${promiseName} Promise 작업 실패`);
      }
    }, sec * 1000);
  });
}

const aPromise = api("a", 1); // pending

(async function () {
  try {
    const result = await aPromise;
    console.log(result);
  } catch (err) {
    console.log(err);
  }
})();

async await 심화구조

async function 자체도 Promise를 리턴한다. 따라서 asnyc function 내에서 return 한 값은 또 다른 async function에서 await를 이용하여 접근 할 수 있다.

function api(promiseName, sec) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (typeof promiseName === "string" && typeof sec === "number") {
        resolve(`${promiseName} Promise 작업이 ${sec}초 걸렸습니다.`);
      } else {
        reject(`${promiseName} Promise 작업 실패`);
      }
    }, sec * 1000);
  });
}

const aPromise = api("a", 1); // pending

const asyncFunction1 = async function () {
  try {
    const result = await aPromise; >>> Promise
    return result;
  } catch (err) {
    console.log(err);
  }
};

const asyncFunction2 = async function () {
  try {
    const result = await asyncFunction1(); >>> async function 또한 Promise를 리턴한다.
    console.log(result);
  } catch (err) {
    console.log(err);
  }
};

asyncFunction2();