Async, await

보통, 비동기 함수는 promise와 resolve,then을 이용해서 표현할 수 있다.
또한 우리는 비동기함수(async)에 await연산자를 이용하여 표현 할 수 있다.

 

function 함수이름() {

  return Promise.resolve('값');

}

// 위와 아래의 함수는 같은 동작을 보여준다.

async function 함수이름2() {

  return '값';

}

함수이름();

// Print: Promise { '값' }

함수이름2();

// Print: Promise { '값' }

 

위와 같이 두 값은 같은 값을 나타낸다.

풀어서 이야기해보면 함수이름이라는 ffunc는 값을 풀어내는 비동기 함수를 같고있는 func고 
아래 비동기 함수의 함수이름 2도 값으로 나타나는 비동기 함수이다.

그러니 같은 값을 나타낸다.

우리는 여기서 async을 사용한 함수를 비동기 함수라고 한다.

 

비동기 함수를 이용하는 이유는 awiat을 이용하여 코딩을 짜면 더 간결하게 잘 수 있다.

 

 

Await 연산자

Await 연산자를 사용하면 Promise가 fulfill 상태가 되거나 rejected될 때 까지 함수의 실행을 중단하고 기다릴 수 있다.

await 연산자는 async함수 안에서만 사용이 가능하다.

 

ex)

async function 함수이름() {

  const result = await 'Test!';

  console.log(result);

}

함수이름();

// Print: 'Test!';

위와같이 result에 await 연산자를 적어서 async 안에서 사용하면
즉시 result에 test을 반환한다.

 

 

좋은 예시의 promise와 asyn을 비교한 로직을 적어놓은 블로그가 있어 퍼와서 설명해보려한다. 

 

function fetchStudent() {

  return fetch( URL ).then( (response)=>{

      return response.json();

  });

}

function fetchClass() {

  return fetch( URL ).then( (response)=>{

      return response.json();

  });

}

function extraClass() {

  const stu = fetchStudent();

  if (stu.avgScore < 60) {

      const list = fetchClass();

      console.log(list.extra);

  }

}

[출처] Promise객체, 그리고 async/await  정리|작성자 아홉번째태양

이런 식으로 60점이하의 리스트를 뽑는 로직인데

promise로 나타내면 

 

function fetchStudent() {

  return new Promise( (resolve, reject) => {

      fetch( URL ).then( (response) => {

          resolve(response.json());

      });

  });

}

function fetchClass() {

  return new Promise( (resolve, reject) => {

      fetch( URL ).then( (response) => {

          resolve(response.json());

      });

  });

}

function extraClass() {

  const stu = fetchStudent().then( (result) => {

      return result;

  });

  if (stu.avgScore < 60) {

      const list = fetchClass().then( (result) => {

          return result;

      });

      console.log(list.extra);

  }

}

[출처] Promise객체, 그리고 async/await  정리|작성자 아홉번째태양

이런식으로 적을 수 있는데 

 

await/async을 맡는다면

function fetchStudent() {

  return fetch( URL ).then( (response)=>{

      return response.json();

  });

}

function fetchClass() {

  return fetch( URL ).then( (response)=>{

      return response.json();

  });

}

async function extraClass() {

  const stu = await fetchStudent();

  if (stu.avgScore < 60) {

      const list = await fetchClass();

      console.log(list.extra);

  }

}

[출처] Promise객체, 그리고 async/await  정리|작성자 아홉번째태양

이렇게 짧고 가시성이 좋게 적을 수 있다.