[JavaScript] async | await

async

• function 앞에 위치
• 해당 함수는 항상 프라미스 반환

async function f(){
    return 1;
}

f().then(console.log)

• 매서드 이름 앞에 async를 추가하면 async 클래스 메서드 선언 가능

class Waiter {
    async wait(){
        return await Promise.resolve(1);
    }
}

new Waiter()
    .wait()
    .then('>>',console.log)

---

await

• async 안에서만 동작
• 프라미스가 처리될 때까지 함수 실행 기다림
• 처리되면 결과와 함께 실행 재개
• 처리되는 동안 엔진이 달ㄴ일을 할 수 있기에 cpu 리소스 낭비 줄일 수 있음

async function f(){
    let promise = new Promise(((resolve, reject) => {
        setTimeout(()=> resolve("완료"),1000);
    }));
    let result = await promise;
    console.log(result);
}

f();

• 최상위 레벨 코드에서 작동하지 않음
• .then 처럼 thenable 사용 가능

---

에러 핸들링

• 프라미스 정상적으로 이행되면 객체 값 리턴
• 거부되면 throw 문을 작성한 것처럼 에러 던져짐

async function f() {

  try {
    let response = await fetch('http://유효하지-않은-url');
    let user = await response.json();
  } catch(err) {
    // fetch와 response.json에서 발행한 에러 모두를 여기서 잡습니다.
    console.log(err);
  }
}

f();

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

⇒ async/await 사용하면 .then/catch 거의 사용 X

• 가끔 가장 바깥 스코프에서 비동기 처리가 필요할 시 같이 사용
  • async/await 가 프라미스 기반으로 한다는 사실 인지

과제

1. async와 await를 사용하여 코드 변경하기

async function loadJson(url){
    let response = await fetch(url);

        if(response.status == 200){
            return response.json();
        }
            throw new Error(response.status);
        

}

//loadJson 호출하는 코드는 async함수 내부가 아니므로 await 불가
loadJson('no-such-user.json')
    .catch(console.log)

2. async가 아닌 함수에서 async 함수 호출하기

async function wait() {
  await new Promise(resolve => setTimeout(resolve, 1000));

  return 10;
}

function f() {
  // ...코드...
  // async wait()를 호출하고 그 결과인 10을 얻을 때까지 기다리려면 어떻게 해야 할까요?
  // f는 일반 함수이기 때문에 여기선 'await'를 사용할 수 없다는 점에 주의하세요!

	wait().then(result => console.log(result));
}
f();