9/25 TIL

< 목차 >

1. async / await
2. 요약

   ---

1. async / await

• async function 선언은 AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의한다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환한다

• async를 function 앞에 붙이면 함수가 Promise 역할이 가능하다

• 함수 실행 후에 Promise 오브젝트가 남는다.
  (성공만 가능하다)

• async function 안에서 쓰는 await는 then 대신 사용한다.

• await은 프로미스 실패시 에러나고 멈춘다.

async function 더하기() {
  let 프로미스 = new Promise((성공,실패) => {
    let 연산 = 1 + 1;
    성공(100);
  }); 
  
  
  let 결과 = await 프로미스;
  console.log(결과);
  // 100
  }

• await는 말 그대로 프라미스가 처리될 때까지 함수 실행을 기다리게 한다. 프라미스가 처리되면 그 결과와 함께 실행이 재개된다. 프라미스가 처리되길 기다리는 동안엔 엔진이 다른 일(스크립트를 실행, 이벤트 처리 등)을 처리 할 수 있기 때문에, CPU 리소스가 낭비되지 않는다.

• await는 promise.then보다 좀 더 세련되게 프라미스의 result 값을 얻을 수 있도록 해주는 문법이다. promise.then보다 가독성 좋고 사용하기 쉽다.

• 일반 함수에는 await을 사용할 수 없다.
  ex)

function f() {
  let promise = Promise.resolve(1);
  let result = await promise; // Syntax error
}

async/await와 promise.then/catch

async/await을 사용하면 await가 대기를 처리해주기 때문에 .then이 거의 필요하지 않다. .catch 대신 일반 try..catch를 사용할 수 있다는 장점도 생긴다. promise.then을 사용하는 것보다 async/await를 사용하는 것이 대개는 더 편리하다.

async function 더하기() {
  let 프로미스 = new Promise((성공,실패) => {
    let 힘든연산 = 1 + 1;
    실패(100);
  }); 
  
  // 프로미스 .then(() => {
  //   console.log('성공했다!')
  // });
  
  try {let 결과 = await 프로미스;
  console.log(결과);} catch {console.log('실패닷....')}
  
  
  
  }

더하기()

---

< 요약 >

function 앞에 async 키워드를 추가하면 두 가지 효과가 있다.

• 함수는 언제나 프라미스를 반환한다.
• 함수 안에서 await를 사용할 수 있다.

• 프라미스 앞에 await 키워드를 붙이면 자바스크립트는 프라미스가 처리될 때까지 대기한다.
• 처리가 완료되면 조건에 따라 아래와 같은 동작이 이어진다

1. 에러 발생 – 예외가 생성됨(에러가 발생한 장소에서 throw error를 호출한 것과 동일함)
2. 에러 미발생 – 프라미스 객체의 result 값을 반환

• async/await를 함께 사용하면 읽고, 쓰기 쉬운 비동기 코드를 작성할 수 있다.