async & await

async & await이란?

 

 자바스크립트 비동기처리 방식은 처음에 callback방식을 썼었지만, 가독성이 떨어지고 콜백지옥에 쉽게 빠져 복잡한 코드가 되었기 때문에 그걸 개선한 Promise가 나오게 되었다. 그리고 최근에 Promise와 callback의 단점을 보완하여 나온 비동기처리 방식이 async와 await이다.

 

async & await 기본문법

async 키워드는 항상 function 앞에 위치하여야한다. function 앞에 async가 붙으면 해당 함수는 항상 Promise를 반환하게 된다. 

async function funcName() {
    return 1;
     또는
    return Promise.resolve(1);
}

funcName().then(alert); // 1

프로미스가 아닌 값을 반환하더라도 이행 상태의 프로미스로 값을 감싸 이행된 프라미스(resolved Promise)가 반환되도록 한다.

 

asynce가 붙은 함수는 await라는 기능도 제공하는데, 오직 async 안에서만 동작한다.

async function funcName() {
  let promise = new Promist((resolve, reject) => {
      setTimeout(() => resolve("완료!"), 1000)
  });
  
  let result = await promise; //프로미스가 이행될 때까지 기다린다..
  
   console.log(result); //완료!
}

funcName();

await은 '기다리다' 라는 말 그대로 프로미스가 처리될 때 까지 함수실행을 기다리게 한다. 프로미스가 처리 되면 그 결과와 함께 실행이 된다. 그러므로 프로미스가 처리되길 기다리는 동안 다른 일(다른 스크립트 실행, 이벤트처리 등)을 할 수 있기 때문에 CPU 리소스가 낭비되지 않는다.

 

await는 promise.then보다 좀 더 쉽고 가독성이 좋은 코드이다.

function turnOnTheComputer() {
  return new Promise((resolve, reject) => {
    setTimeout(() => { resolve('first, trun on the computer') }, 1000)
  })
}

function learningJavascript() {
  return new Promise((resolve, reject) => {
    setTimeout(() => { resolve('second, learning Javascript') }, 1000000)
  })
}

function eatLunch() {
  return new Promise((resolve, reject) => {
    setTimeout(() => { resolve('thrid, eat Lunch') }, 10000000)
  })
}

function blogging() {
  return new Promise((resolve, reject) => {
    setTimeout(() => { resolve('fourth, Blogging.....') }, 1000000)
  })
}

const daily_Routine = async () => {
  const first = await turnOntheComputer();
  console.log(first)
  
  const second = await learningJavascript(); 
  console.log(second)
  
  const third = await eatLunch();
  console.log(third)
  
  const fourth = await blogging();
  console.log(fourth)
}

daily_Routine()