자바 스크립트에서 비동기 및 대기

ES2017에는 비동기 JavaScript 프로그래밍의 패러다임 전환을 나타내는 두 가지 새로운 키워드인 async 및 await가 도입되었습니다. 이 새로운 키워드는 Promise 사용을 크게 단순화하고 네트워크 응답 또는 기타 비동기 이벤트를 기다리는 동안 차단되는 동기 코드처럼 보이는 Promise 기반 비동기 코드를 작성할 수 있게 해줍니다.

표현식을 기다리다

await 키워드는 Promise를 가져와 반환 값이나 throw된 예외로 되돌립니다. Promise 객체 p가 주어지면 await p 표현식은 p가 해결될 때까지 기다립니다. p가 이행되면 await p의 값은 p의 이행 값입니다. 반면에 p가 거부되면 await p 표현식은 p의 거부 값을 발생시킵니다. 우리는 일반적으로 Promise를 보유하는 변수와 함께 await를 사용하지 않습니다. 대신 Promise를 반환하는 함수를 호출하기 전에 사용합니다.

let response = await fetch("/api/user/profile");
let profile = await response.json();

비동기 함수

await를 사용하는 모든 코드는 비동기식이므로 한 가지 중요한 규칙이 있습니다. async 키워드로 선언된 함수 내에서만 await 키워드를 사용할 수 있습니다.

async function getHighScore() {
    let response = await fetch("/api/user/profile");
    let profile = await response.json();
    return profile.highScore;
}

함수를 비동기로 선언한다는 것은 함수 본문에 Promise 관련 코드가 나타나지 않더라도 함수의 반환 값이 Promise가 된다는 의미입니다. 비동기 함수가 정상적으로 반환되는 것으로 나타나면 함수의 실제 반환 값인 Promise 객체가 해당 반환 값으로 확인됩니다. 그리고 비동기 함수가 예외를 발생시키는 것으로 나타나면 해당 함수가 반환하는 Promise 객체가 해당 예외와 함께 거부됩니다.

getHighScore() 함수는 비동기로 선언되었으므로 Promise를 반환합니다. Promise를 반환하기 때문에 await 키워드를 함께 사용할 수 있습니다.

displayHighScore(await getHighScore());

여러 약속을 기다리는 중

비동기를 사용하여 getJSON() 함수를 작성했다고 가정합니다.

async function getJSON(url) {
    let response = await fetch(url);
    let body = await response.json();
    return body;
}

이제 이 함수를 사용하여 두 개의 JSON 값을 가져오고 싶다고 가정합니다.

let value1 = await getJSON(url1);
let value2 = await getJSON(url2);

이 코드의 문제점은 불필요하게 순차적이라는 것입니다. 첫 번째 가져오기가 완료될 때까지 두 번째 URL 가져오기가 시작되지 않습니다. 두 번째 URL이 첫 번째 URL에서 얻은 값에 의존하지 않는 경우 두 값을 동시에 가져와야 합니다. 비동기 함수의 Promise 기반 특성이 나타나는 경우입니다. 동시에 실행되는 일련의 비동기 함수를 기다리기 위해 Promise를 직접 사용하는 것처럼 Promise.all()을 사용합니다.

let [value1, value2] = await Promise.all([getJSON(url1), getJSON(url2)]);