본문 바로가기

JavaScript/javascript 기초 공부하기

async / await

반응형

Promise를 더욱 쉽게 사용할수 있게 해준다

 

함수를 선언할때 async를 붙여주고 promise의 앞부분에 await를 붙여주면 해당 프로미스가 끝날떄까지 기다렸다가 작업을 수행한다

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

async function process() {
  console.log('안녕하세요!');
  await sleep(1000); // 1초쉬고
  console.log('반갑습니다!');
}

process();

 

또한 함수에서 async를 사용하면 결과값으로 Promise를 반환한다

즉 then이 사용 가능해진다

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

async function process() {
  console.log('안녕하세요!');
  await sleep(1000); // 1초쉬고
  console.log('반갑습니다!');
}

process().then(() => {
  console.log('작업이 끝났어요!');
});

 

에러를 잡기위해서는 try catch문을 사용한다 

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

async function makeError() {
  await sleep(1000);
  const error = new Error();
  throw error;
}

async function process() {
  try {
    await makeError();
  } catch (e) {
    console.error(e);
  }
}

process();

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

const getDog = async () => {
  await sleep(1000);
  return '멍멍이';
};

const getRabbit = async () => {
  await sleep(500);
  return '토끼';
};
const getTurtle = async () => {
  await sleep(3000);
  return '거북이';
};

async function process() {
  const dog = await getDog();
  console.log(dog);
  const rabbit = await getRabbit();
  console.log(rabbit);
  const turtle = await getTurtle();
  console.log(turtle);
}

process();

위의 함수는 dog 1 초 토끼 0.5초 turtle 3초가 걸리는데 총 시간은 4.5초가 소요된다

 

이를 동시에 작업하고 싶다면 Promise.all 을 사용해야 한다 

 

Promise.all 을 사용할때는 등록한 Promise 중 하나라도 실패하면 모두 실패로 간주한다

 

 

Promise.race는 가장빠르게 결과가 나온것의 결과만 가져 오며 

첫번째로 가져온 것이 에러가 발생했을때만 실패로 간주한다 ( 첫번째를 제외한것의 오류가 발생했을땐 무시된다)

 

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

const getDog = async () => {
  await sleep(1000);
  return '멍멍이';
};

const getRabbit = async () => {
  await sleep(500);
  return '토끼';
};
const getTurtle = async () => {
  await sleep(3000);
  return '거북이';
};

async function process() {
  const first = await Promise.race([
    getDog(),
    getRabbit(),
    getTurtle()
  ]);
  console.log(first);
}

process();

 

 

const arr = [Promise1, Promise2];

식으로 프라미스 형태일떄  map, forEach를 사용하는것이 아니라 for of, promise.All등을 사용해야한다.

반응형