[JS] async 와 await

async

async는 promise 처럼 함수를 만들어준다.

// 1. async 사용하기

// promise 라면!
function a(){   // 데이터를 받아오는데 시간이 걸리는 함수.
  // promise라면
  return new Promise((resolve, reject) => { 
    resolve("a");
  })
}

const exA = a(); // async나 promise를 사용하지 않으면 여기서 시간을 잡아먹는다.

console.log(exA);

// ----------------------------------------------------------------

// async 라면!
// 함수 앞에 async를 붙인다. 그러면 함수 안의 내용을 promise로 바꿔준다.
async function b(){   // 데이터를 받아오는데 시간이 걸리는 함수.
  return "b";
}

const exB = b(); // async나 promise를 사용하지 않으면 여기서 시간을 잡아먹는다.

console.log(exB);

 

await

await는 async가 붙은 함수에서만 사용 가능하다.

await 가 붙은 동작들이 모두 실행된 후에 return을 해준다.

// 2. await
// async가 붙은 함수 안에서만 사용 가능.

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function c() {
  await delay(1000);
  return "c"; 
}

async function d() {
  await delay(1000);
  return "d";
}

async function pickAlpa() {
  const exC = await c();
  const exD = await d();
  return `${exC} + ${exD}`;
}

pickAlpa().then(result => console.log(result));
pickAlpa().then(console.log); // 위와 같음.

 

promise 추가.

// 병렬적 promise를 이용한 처리 api
function pickAll(){
  return Promise.all([c(), d()]) // promise.all은 병렬적으로 처리해 모든  promise를 받아오길 기다림
  .then(alphas => alphas.join(" + "))
}
pickAll().then(console.log);

function pickOne() {
  return Promise.race([c(),d()]); // race 는 먼저 리턴되는 것만 취급.
}

pickOne().then(console.log);