JavaScript의 Fetch 메서드는 왜 await를 두 번 사용하는가?

JavaScript의 비동기 프로그래밍은 최근 웹 개발에서 필수적인 요소가 되었습니다. 특히, fetch 메서드와 async/await 구문은 외부 데이터를 가져오는 데 매우 유용하게 사용됩니다. 그러나 많은 개발자들이 fetch 메서드를 사용할 때 await를 두 번 사용하는 이유에 대해 궁금해합니다.

 

 

Fetch 메서드란?

fetch 메서드는 네트워크 요청을 보내고 응답을 받아오는 기능을 제공합니다. 주로 API 호출을 통해 서버로부터 데이터를 가져올 때 사용됩니다. 기본적으로 fetch는 프로미스를 반환하므로, 비동기 처리에 적합합니다.

const response = await fetch('https://api.example.com/data');

위의 코드에서 fetch 메서드는 API로부터 데이터를 요청하고, 그 결과를 response 변수에 저장합니다.

 

 

Await를 두 번 사용하는 이유

fetch 메서드를 사용할 때 await를 두 번 사용하는 이유는 다음과 같습니다.

 

MDN Fetch API

The fetch() method takes one mandatory argument, the path to the resource you want to fetch. It returns a Promise that resolves to the Response to that request — as soon as the server responds with headers — even if the server response is an HTTP error status. You can also optionally pass in an init options object as the second argument (see Request).

 

1. 첫 번째 Await: 네트워크 요청 처리

첫 번째 await는 fetch 호출에 대한 응답이 올 때까지 기다립니다. 이 단계에서 네트워크 요청이 진행되고, 응답이 도착하면 response 객체로 반환됩니다.

const response = await fetch('https://api.example.com/data');

 

2. 두 번째 Await: 응답 데이터 처리

두 번째 await는 response 객체에서 데이터를 추출하는 과정에서 사용됩니다. response 객체는 json(), text(), blob() 등 여러 메서드를 제공하며, 이 메서드들은 비동기적으로 데이터를 처리합니다.

 

예를 들어, JSON 데이터를 가져오려면 다음과 같이 사용합니다.

const data = await response.json();

여기서 두 번째 await는 json() 메서드가 완료될 때까지 기다리며, 최종적으로 파싱된 JSON 데이터를 data 변수에 저장합니다.

 

 

두 단계 접근 방식의 이점

헤더에 대한 조기 접근

개발자는 전체 응답을 기다리지 않고도 상태 코드나 기타 헤더 정보를 확인할 수 있습니다.

 

스트리밍 기능

큰 응답이나 실시간 데이터의 경우, 데이터 조각이 도착하는 즉시 처리를 시작할 수 있습니다.

 

유연성

응답 헤더에 따라 다양한 본문 파싱 방법(json(), text() 등)을 선택할 수 있습니다.

 

 

전체 코드 예시

아래는 fetch 메서드와 await를 두 번 사용하는 전체 예시입니다.

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('There has been a problem with your fetch operation:', error);
    }
}

fetchData();

 

 

결론

fetch 메서드에서 await를 두 번 사용하는 것은 비동기 프로그래밍의 특성상 필수적입니다. 첫 번째 await는 서버로부터의 응답을 기다리고, 두 번째 await는 응답 데이터를 파싱하기 위해 사용됩니다. 이러한 구조를 이해하면 비동기 요청을 보다 효율적으로 처리할 수 있습니다.

 

 

https://devlevel1.tistory.com/3

JavaScript의 Fetch 메서드와 이중 Await 패턴 이해하기