JavaScript에서 async와 await

🤓JavaScript에서 async와 await는 비동기 작업을 보다 명확하고 읽기 쉽게 처리하기 위한 문법입니다.

async

🫡async 키워드는 함수 앞에 위치합니다. 이 키워드가 붙은 함수는 항상 프로미스를 반환하게 됩니다.
await를 사용하려면 함수 앞에 async가 필수입니다.

async function fetchData() {
    //비동기 로직
}

만약 async 함수가 값을 반환한다면, 그 값은 프로미스로 감싸져 반환됩니다.

async function fetchData() {
    return "data";
}
// fetchData()는 Promise로 "data"를 반환합니다.
console.log(fetchData()); 
// 작업이 완료된 프로미스가 반환이 됩니다.

await

🤔await 키워드는 async 함수 내에서만 사용할 수 있으며, 비동기 작업의 완료를 기다립니다.

async function fetchData() {
    let response = await fetch("https://hello.com");
    let data = await response.json();
    return data;
}

1. fetch()로직이 실행됩니다. fetch() 가 완료될 때까지 response에 값을 할당하지 않습니다.
2. fetch()가 완료된 다음 response에 값을 할당합니다.
3. response.json()로직을 실행합니다. 마찬가지로 await로 인해 data변수에는 값이 할당 되지 않습니다.
4. response.json()가 끝이나면 data에 값이 할당됩니다.

await를 사용하면 비동기 로직을 동기 로직처럼 작성 할 수 있어 더욱 가독성을 높일 수 있습니다.

주의

😎await를 남발하게 되면 결국 동기 로직에 가까워지기 때문에 적합한 곳에 사용해야 합니다.

async function fetchData() {
    let response1 = await fetch("https://hello1.com");
  	let response2 = await fetch("https://hello2.com");
}

만약 하나의 fetch()가 1초가 걸린다고 가정하면, 위 코드는 총 2초가 걸립니다. 두 fetch 작업이 독립적인 경우, 불필요한 대기 시간이 생깁니다.

이러한 문제를 해결하기 위해 두 가지 방법을 사용할 수 있습니다:

1. await를 제거하여 비동기 작업들이 동시에 실행되도록 만듭니다.
2. Promise.all()을 사용하여 여러 프로미스가 동시에 실행되게 만듭니다.

async function fetchData() {
    let response1 = fetch("https://hello1.com");
  	let response2 = fetch("https://hello2.com");
  	let [result1, result2] = await Promise.all([response1, response2]);
}

🥳이렇게 수정하면 두 fetch() 작업이 동시에 시작되며, 모든 작업이 완료되기를 기다린 후 결과를 반환합니다.