[JavaScript] 비동기 처리(promise, async, await)

처리가 오래 걸리는 요청을 했을 때 JavaScript 는 기본적으로 싱글스레드 환경에서 동작하기 때문에 요청이 완료될때 까지 기다립니다.

Aug 30, 2024

[JavaScript] 비동기 처리(promise, async, await)

처리가 오래 걸리는 요청을 했을 때 JavaScript 는 기본적으로 싱글스레드 환경에서 동작하기 때문에 요청이 완료될때 까지 기다립니다. 그렇게 되면 모든 요청이 돌아올 때 까지 화면이 랜더링 되지 않습니다.


function download() {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "http://localhost:8080/test", false); // false는 동기 요청을 의미함
    xhr.send();
    return xhr;
} // 랜더링 100년걸림

위 코드에서 XMLHttpRequest의 open 메서드에 false를 두 번째 인수로 전달하여 동기 요청을 합니다. 이렇게 되면 요청이 완료될 때까지 JavaScript의 실행이 블록(block)되고, 그동안 UI도 멈추게 됩니다.

Fetch와 Promise

이 문제를 해결하기 위해 우리는 비동기 요청을 사용할 수 있습니다. fetch 함수는 비동기적으로 HTTP 요청을 보냅니다. 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '프로미스(promise)'를 반환합니다. 따라서, 요청이 완료될 때까지 기다리지 않고, 다른 작업을 계속 수행할 수 있습니다.


let response = fetch("http://localhost:8080/test"); // fetch는 Promise를 반환

Promise 의 상태

대기(pending): 이행하지도, 거부하지도 않은 초기 상태.

이행(fulfilled): 연산이 성공적으로 완료됨.

거부(rejected): 연산이 실패함.

Async/Await를 사용한 비동기 처리

fetch와 함께 async/await를 사용하면 비동기 요청을 더 직관적으로 다룰 수 있습니다. async 함수 내에서 await 키워드를 사용하면 Promise가 해결될 때까지 기다렸다가, 그 결과를 반환받을 수 있습니다.


async function download() {
    let response = await fetch({
        method: "get",
        url: "http://localhost:8080/test"
    });
} //값이 오는상태


async function download() {
    let response = await fetch("http://localhost:8080/test");
    let data = await response.json();
    $("#root").append(`<div>${data.body}</div>`);
}

Promise와 async/await 는 모두 비동기 작업을 처리하고 있습니다. 이 둘의 차이는 무엇이 있을까요?

Promise와 async/await의 차이점

Promise

Promise를 사용한 코드는 .then() 과 .catch() 체인을 사용합니다.


fetch("http://localhost:8080/test")
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
    // 데이터 처리 로직
  })
  .catch((error) => {
    console.error("Error:", error);
  });

async/await

async/await는 비동기 함수 호출마다 await 키워드를 사용하여 Promise가 해결될 때까지 기다리게 하고, 에러 처리도 try...catch 블록을 사용하여 처리합니다


async function fetchData() {
  try {
    const response = await fetch("http://localhost:8080/test");
    const data = await response.json();
    console.log(data);
    // 데이터 처리 로직
  } catch (error) {
    console.error("Error:", error);
  }
}

fetchData();

See more posts

[JavaScript] 비동기 처리(promise, async, await)

Fetch와 Promise

Async/Await를 사용한 비동기 처리

Promise와 async/await의 차이점

More articles

HTML 구성을 위한 투쟁

[v3] SpringBoot 블로그 만들기 -1

[JavaScript] JavaScript와 jQuery로 HTML 요소 스타일 변경하기

[JavaScript] 서버 사이드 랜더링 & 클라이언트 사이드 랜더링