프로그래머스 데브코스 TIL Day 13

Day 13 - 2022/11/02

💡 새롭게 알게된 점

JS에서 원격 API 호출하기

fetch api

fetch api는 비동기 http 요청을 좀 더 쓰기 편하게 해주는 api로, XMLHTTPRequest를 대체하며 Promise 기반으로 동작한다.

fetch api 사용하기

fetch(`${url}`)
    .then(res => {
        return res.json();
    })
	   .then(todos => {
        console.log(todos);
    });

fetch의 기본 응답 결과는 Response 객체이다.

따라서 text()나 json()으로 바꿔줘야 한다.

그 외에도 blob()은 이미지 처리하는데에 사용할 수 있다.

fetch 중 HTTP error가 발생한 경우

HTTP error가 발생하더라도 reject 되지 않는다.

네트워크 에러나 요청이 완료되지 못한 경우에만 reject 된다.

그러므로 서버 요청 중 에러가 생겼을 경우에도 then으로 떨어지므로, response의 status code나 ok를 체크해줘야 한다.

이 때 response.oksms 200번대의 status인 경우만 true가 되기 때문에 300대인 경우 한 번 체크해 봐야한다.

다른 라이브러리도 많은데 왜 fetch를 사용해야 할까?

사실 브라우저에서 fetch()를 지원하기 전까지는 클라이언트 단에서 직접 HTTP 요청 후 응답을 받는게 복잡했기 때문에 request, axios, jQuery 같은 라이브러리를 사용하는 것이 합리적이었다.

그러나 fetch()를 지원하는 요즘에는 라이브러리의 도움 없이도 충분하기에 오히려 이러한 라이브러리를 사용하는 것이 자바스크립트 번들 파일의 크기만 늘려서 낭비가 될 수 있다.

fetch의 사용성 개선하기

fetch()는 사용법이 아주 간단하지만, 계속 사용하다보면 똑같은 코드가 반복된다.

예를 들어 response data를 얻기 위해 response.json()을 매번 호출하거나, request 시 HTTP 요청 헤더에 ”Content-Type”: “application/json”로 설정해주는 부분은 반복돼서 사용된다.

이럴 때 fetch()를 직접 사용하기 보다 별도의 함수나 모듈로 빼서 사용해보자!

async function post(url, body, headers = {}) {
    const options = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            ...headers,
        },
        body: JSON.stringify(body),
    };
    const res = await fetch(API_END_POINT + url, options);
    const data = await res.json();
      
    if (res.ok) {
        return data;
    } else {
        throw Error(data);
	}
}
   
post('/posts', {
        title: 'Test',
        body: 'Testing 1',
        userId: 1,
    })
    .then((data) => {
		console.log(data)
    })
    .catch((error) => {
    	console.log(error)
    });

---

❗️ 느낀점

사실 브라우저에서 fetch()를 지원한다는 사실은 알고 있었는데, 브라우저 환경에 따라 사용할 수 없는 경우도 있기에 주로 axios를 통해 원격 API를 호출했었다.

그런데 오늘 찾아보니 fetch()를 사용할 수 있음에도 외부 라이브러리를 통해 http 요청을 하는 경우 자바스크립트의 번들 파일의 크기를 늘려 낭비가 될 수 있다고 하니 앞으로 fetch()를 사용할 수 있는 경우에는 fetch()를 애용해야겠다는 생각을 했다.

오늘도 고생했다👊