[JavaScript] 비동기 호출 | Async/await

Eunji Lee·2022년 11월 23일
0

[TIL] JavaScript

목록 보기
22/22
post-thumbnail

Async/await

  • Promise에서 확장된 개념이라고 생각하면 됨!
  • 비동기적인 처리를 동기적인 처리처럼 보이도록 함

Syntax

// 함수 선언식
async function funcDeclarations() {
	await 작성하고자 하는 코드
	...
}

// 함수 표현식
const funcExpression = async function () {
	await 작성하고자 하는 코드
	...
}

// 화살표 함수
const ArrowFunc = async () => {
	await 작성하고자 하는 코드
	...
}

async

async 키워드가 붙은 함수는 항상 프라미스를 반환하고, 반환하는 값이 프라미스가 아니더라도, 이행된 프라미스(resolved promise)로 감싸 반환함

await

await 키워드를 만나면 프라미스가 처리될 때까지 기다림 → 반드시 async 함수 안에서만 사용해야 함

결과

에러가 발생할 경우

예외가 생성됨(에러가 발생한 장소에서 throw error를 호출한 것과 동일한 결과)

async function f() {
  let response = await fetch('http://유효하지-않은-주소');
}

// f()는 거부 상태의 프라미스
f().catch(alert); // TypeError: failed to fetch // (*)

에러가 발생하지 않을 경우

프라미스 객체의 result 값을 반환

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"
}

f();

참고자료
JavaScript INFO - async와 await

0개의 댓글