[ javascript ]async / await

async/await 란?

async/await 는 javascript에서 promise를 더욱 쉽게 사용할 수 있도록 서포트해주는 문법입니다

// promise 를 만드는 함수
function sleep(ms){
  // 파라미터 ms 이후에 resolve를 호출해 promise가 끝이납니다
  return new Promise(resolve => setTimeout(resolve, ms));
}
// async / await 문법을 사용할때는 앞에 async 표기
async function process(){
  console.log('안녕하세요;');
  // promise의 앞부분에 await를 붙여줘야합니다
  // promise를 기다리는 작업을.then 을 쓸필요가 없어집니다
  await sleep(1000);
  // 안녕하세요 출력후 1초뒤에 '반갑습니다' 출력
  // async /await 문법을 사용시 분기점을 만드는것도 쉽고 변수를 공유하는것도 쉽습니
  console.log('반갑습니다');
}
process();

async / await 문법을 사용한 함수를 사용하게 된다면 결과물은 프로미스에 반환하게 됩니다

function sleep(ms){
  return new Promise(resolve => setTimeout(resolve, ms));
}
async function process(){
  console.log('안녕하세요;');
  await sleep(1000);
  console.log('반갑습니다');
	return true;
}
process().then(value => {
	console.log(value); // true
});

만약에 promise에서 에러를 발생하고 싶으면 throw 사용하고 에러를 잡아내고 싶을때는 try catch를 사용하면 됩니다

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

async function makeError(){
  await sleep(1000);
  // 변수 error 에 에러 생성자 함수를 담습니
  const error = new Error();
  // 에러 발생
  throw error;
}

async function process(){
  // 에러를 잡아낼때는 try catch 사용
  try {
    await makeError();
  // catch 의 매개변수인 e는 makeError에서 생성된 error입니다
  } catch (e){
    console.log(error);
  }
}
process().then(value => {
  console.log(value); // true
});

다른 예제

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

const getDog = async () => {
  await sleep(1000); // 1초
  return 'Dog';
}
const getRabbit = async () => {
  await sleep(500); // 0.5초
  return 'Rabbit';
}
const getTurtke = async () => {
  await sleep(3000); // 3초
  return 'Turtle';
}
async function process(){
  const dog = await getDog();
  console.log(dog);
  const rabbit = await getRabbit();
  console.log(rabbit);
  const turtle = await getTurtke();
  console.log(turtle);
  /* 출력순서
    'dog'
    'rabbit'
    'turtle'
   */
}
process();
/*
	dog, rabbit, turtle 는 순서대로 실행이 됩니다 
	여기서 한번에 처리하는 방법이 Promise all 입니다
*/
function sleep(ms){
  return new Promise(resolve => setTimeout(resolve, ms));
}

const getDog = async () => {
  await sleep(1000); // 1초
  return 'Dog';
}
const getRabbit = async () => {
  await sleep(500); // 0.5초
  return 'Rabbit';
}
const getTurtke = async () => {
  await sleep(3000); // 3초
  return 'Turtle';
}
async function process(){
  // Promise가 모두 끝나면 Promise의 반환값은 dog, rabbit, turtle의 결과값이 담긴 배열을 반환합니다
  const result = await Promise.all[getDog(), getRabbit(), getTurtke()];
  console.log(result); // ['dog', 'rabbit', 'turtle'] 총 걸린 시간은 turtle로 인해 3초입니다
}
process();

// 배열의 값들을 꺼내서 변수에 넣고 싶을때
async function process(){
  const result = await Promise.all([getDog(), getRabbit(), getTurtke()]);
  const dog = result[0];
  const rabbit = result[1];
  const turtle = result[2];
}
// 비구조화 할당 적용
async function process(){
  const [dog, rabbit, turtle] = await Promise.all[getDog(), getRabbit(), getTurtke()];
}

// Promise.race
// Promise.race 는 Promise.all과 비슷합니다 다른점은 Promise.all 처럼 한번에 실행되지만
// 가장 빨리 끝난 promise만 반환합니다

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