[js] javascript 에서 async 와 await를 이용해 비동기 처리하기

하이 ...!

오늘은 javascript에서 async와 await를 이용해 비동기를 처리하는 방법을 공유드리려한다.

 

먼저 이전에 javascript에서 Promise 패턴을 이용해서 비동기 처리하는 것을 알려드린적 있다.

혹시 기억이 안나면 아래 링크를 보고 오자.

https://devkingdom.tistory.com/218?category=841890 

[JS] 자바스크립트의 비동기 처리 패턴 - 콜백(callback), 프로미스(promise)

위의 링크를 읽을면 알 수 있듯이 프로미스 패턴을 이용하면 흔히 ajax통신으로 비동기 처리를 할때 겪었던 콜백 지옥을 피할 수 있다.

 

한번 더 프로미스 패턴을 어떻게 쓰는지 공유드리면 아래와 같다.

const authUser = (name) => {
  console.log(name + '을 인증합니다');
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("유저 인증 성공")
    }, 2000);
  });
};

const parseData = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      //res("데이터 파싱 완료")
      rej("파싱 실패!!!!")
    }, 2000);
  });
};

const viewData = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("화면에 뿌려주기 완료")
    }, 2000);
  });
};

console.log("시작");
authUser('kang')
   .then((res) => parseData(res))
   .then((res) => viewData(res))
   .then((res) => console.log(res))
   .catch(console.log)
   .finally(() => {
     console.log("끝");
})

res는 resolve로 성공했을 때의 결과를 처리하고

rej는 reject로 실패했을 때의 결과를 처리한다.

 

결과는 아래와 같이 나온다.

 

여기서 Promise.all을 이용해서 한번에 일괄적으로 처리가 가능하다. (실제로 then으로 따로 분리해서 처리하는 것보다 더 빠르다.)

Promise.all([authUser('kang'), parseData(), viewData()]).then((res) => {
  console.log(res);
}).catch(console.log);

 

async & await

 

async와 await를 이용하면 훨씬 더 직관적인 표현이 가능하다.

const authUser = (name) => {
  console.log(name + '을 인증합니다');
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("유저 인증 성공")
    }, 2000);
  });
};
const parseData = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("데이터 파싱 완료")
      //rej("파싱 실패!!!!")
    }, 2000);
  });
};

const viewData = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("화면에 뿌려주기 완료")
    }, 2000);
  });
};

console.log("시작");
async function viewTask() {
  try {
    const result1 = await authUser('kang');
    const result2 = await parseData(result1);
    const result3 = await viewData(result2);
    console.log(result3);
  } catch (e) {
    console.log(e);
  } finally {
    console.log("끝");
  }
}
viewTask();

async를 function 앞에 붙여주고, await는 내부에서 결과를 기다려야할 호출하는 함수앞에 붙여준다.

결과는 아래처럼 동일하게 나온다.

마찬가지로 async와 await는 Promise.all에서도 사용이 가능하다.

console.log("시작");
async function viewTask() {
  try {
    const result =await Promise.all([authUser("kang"), parseData(), viewData()]);
    console.log(result);
  } catch (e) {
    console.log(e);
  } finally {
    console.log("끝");
  }
}
viewTask();

 

끝.