async & await

📌 동기(synchronous) & 비동기(Asynchronous)

📍 동기(synchronous) 방식

요청과 결과가 동시에 일어나는 방식으로 요청을 보낸 후 응답을 받아야 다음 동작이 진행된다.

• 요청과 결과가 한 자리에 동시에 나타나는 것으로 사용자가 서버로 요청을 보냈을 경우 요청에 대한 응답을 리턴받기 전까지는 다른 것을 하지 못하고 기다려야 한다.
• 특정 프로그램을 구동시키는 데 시간이 5분 소요된다고 하면, 이 프로그램이 구동되는 5분동안 컴퓨터는 다른 프로그램을 동작시키지 못하고, 구동되기를 기다려야 한다.
• 장점 : 설계가 간단하고, 직관적이다.
• 단점 : 요청에 대한 결과가 반환되기 전까지 대기해야 한다.

📍 비동기(Asynchronous) 방식

요청과 결과가 동시에 일어나지 않는 방식으로 요청과 결과가 동시에 일어나지 않는다.

• 요청한 곳에 결과가 나타나지 않으며, 사용자가 서버로 요청을 보냈을 경우 요청에 대한 응답을 기다리지 않고, 다른 것을 수행할 수 있으며 서버로 다른 요청을 보낼 수도 있다.
• 특정 프로그램을 구동시키는 데 시간이 5분 소요되어도 그 시간동안 다른 프로그램을 수행할 수 있다.
• 장점 : 요청에 대한 결과가 반환되기 전에 다른 작업을 수행할 수 있어서 자원을 효율적으로 사용할 수있다.
• 단점 : 동기 방식보다 설계가 복잡하고, 논증적이다.

논증은 증명 또는 입증이라고도 하며, 어떤 판단이 참(眞)이란 것의 이유를 부여하거나 명확하게 보여줄 때 논증한다고 말한다.

📌 async와 await의 이해

async와 await은 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 ES8에 해당하는 문법이다.

기본적인 사용법은 이렇다.

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

const process = async () => {
  console.log("처음뵙겠습니다 ooo입니다.");
  await sleep(2000);//2초후 
  console.log("저는 xxx입니다. 반갑습니다.");
};
process();

async/await 문법을 사용할 때에는, 함수를 선언 할 때 함수의 앞부분에 async키워드를 붙여준다. 그리고 Promise 앞부분에 await을 넣어주면 해당 프로미스가 끝날때까지 기다렸다가 다음 작업을 수행 할 수 있다.

위 코드에서는 sleep이라는 함수 만들어서 파라미터로 넣어준 시간만큼 기다리는 Promise를 만들고, 이를 process 함수에서 사용해줬다.

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

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

process().then(() => { //.then() process function이 끝나서 나서 실행됨.
  console.log('작업이 끝났어요!');
});

async 함수에서 에러를 발생시키려면 throw를 사용하고, 에러를 잡아내려면 try/catch문을 사용한다.

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

const makeError = async () => {
  await sleep(2000);
  const error = new Error();
  throw error;
}

const process = async () => {
  try {
    await makeError();
  } catch (e) {
    console.error(e);
  }
}

process();

참조
https://github.com/Febase/FeBase/blob/master/Javascript/Asynchronous.md