오늘 무엇을 배웠나

• fetch
• 크롤링

확장학습

fetch 함수 뜯어보기

fetch 함수는 네트워크 요청을 보내고 Promise를 반환하는 함수이다. 이는 JavaScript의 내장 함수로, 웹 API로부터 데이터를 가져올 때 사용된다.

fetch 함수가 반환하는 Promise는 Response 객체를 값으로 가진다. Response 객체는 HTTP 응답을 나타내며, 응답의 상태 코드, 헤더, URL 등 다양한 정보를 포함하고 있다. 그러나 본문의 데이터는 Response 객체가 아닌 별도의 메서드를 통해 접근 가능하다. 이런 메서드로는 json(), text(), formData(), blob(), arrayBuffer() 등이 있다. 이러한 메서드들은 Promise를 반환하며, 해당 Promise는 파싱된 데이터를 값으로 가집니다.

그래서 일반적으로 fetch 함수를 사용할 때는 다음과 같이 두 번의 then을 연결해서 사용한다. 첫 번째 then은 HTTP 응답 자체를 처리하고, 두 번째 then은 응답 본문의 데이터를 처리한다.

fetch(url, option)
.then(response =>response.json())
.then(jsonResponse => {
                console.log(jsonResponse['temp'])
            })

옵션에는 url에 어떤 요청을 넣을 것인지에 관한 옵션이다. 필수는 아니며, 미작성 시 기본으로 GET 요청을 한다.

요약하면, fetch()는 HTTP 요청에 대한 응답을 받아오는 Promise를 반환하고, response.json() 등의 메서드는 응답 본문을 파싱하는 Promise를 반환한다. 각 then() 메서드는 이 Promise들을 받아 처리하는 역할을 한다.

fetch 함수는 비동기적으로 작동한다. 그래서 fetch가 반환하는 Promise는 비동기적 연산의 결과 값이라 할 수 있다. 이러한 비동기적 처리는 클라이언트에게 효율적이고 동시적인 웹 경험을 창출할 수 있다.