[JS] Syntax | 07. await & async

1. await

await은 Promise를 반환하는 함수가 일을 모두 끝마치고 그 결과값을 반환할 때까지 대기하는 구문입니다.

// fetch는 promise를 반환합니다.
const response = await fetch('https://...')

// response.json도 promise를 반환합니다.
const data = await response.json()

비동기 함수가 작동하는 동안, Promise는 세 가지 상태를 가집니다.

 

Pending은 함수의 일이 마칠 때 까지 대기하고 있는 상태입니다.

Fulfilled는 함수의 일이 모두 끝마치고 결과를 반환한 상태입니다.

Rejected는 함수가 오류로 인해 일을 끝마치지 못한 상태에서 종료된 상태입니다.

 

여기서 await 구문은 pending 상태의 함수가 fulfilled 상태가 될 때까지 대기하게 만든다고 생각하면 됩니다.

만약 pending 상태에서 rejected 상태가 된다면, promise는 오류 내용을 반환합니다.

이는 다른 오류들과 같이 try - catch 문에서 처리할 수 있습니다.

2. async

Promise를 반환하는 비동기 함수는 또 다른 함수에서 쓰일 일도 있습니다.

const awaitFunc = () => {
	const res = await fetch("https://something.com")
	console.log(res)
}

하지만 여기서 await을 사용하면 다음과 같은 에러가 발생합니다.

이는 await을 async function(비동기 함수) 안에서 사용하지 않았기 때문입니다.

여기서 알 수 있듯이, await을 함수 안에서 사용하기 위해서는 async 구문과 함께 함수를 선언해야 합니다.

// arrow function 형태
const awaitFunc = async () => {
	const res = await fetch("https://something.com")
	console.log(res)
}

// 일반 형태
async function awaitFunc() {
	const res = await fetch("https://something.com")
	console.log(res)
}

Async function은 그 안에 있는 await이 필요한 함수와 마찬가지로 Promise를 반환합니다.

때문에 async function의 반환값을 밖에서 사용하려면, 똑같이 await를 사용하면 됩니다.

const awaitFunc = async () => {
	const res = await fetch("https://something.com")
    return res
}

console.log(await awaitFunc())

3. async-await 구문의 실행 순서

일반적으로 await 구문이 실행되면, 프로그램은 해당 함수가 완료될 때까지 대기합니다.

하지만 async function 안에서 await을 실행하면 그 순서가 조금 바뀌게 됩니다.

async function에서 await이 실행되면, 그 함수가 실행되는 동안 async function 밖의 명령이 먼저 실행됩니다.

console.log("1")

const awaitFunc = async () => {
    const res = await fetch("https://something.com")
    console.log("2")
    return res
}

console.log("3")

await의 기작에 따르면, 위 코드는 1, 2, 3의 순서로 숫자를 출력해야 합니다.

하지만 await이 async function 내에서 실행되었기 때문에,

fetch( )가 실행되는 동안 바깥의 console.log("3")이 먼저 실행됩니다.

이후 fetch( )가 완료되면 프로그램은 다시 awaitFunc() 안으로 돌아가 console.log("2")를 실행하게 됩니다.

따라서 실제 출력 순서는 1, 3, 2가 됩니다.