[JS/Node] fetch API- How to use 기초

Node.js - fetch API How to use 기초 편

이번 포스팅에는 Node.js의 API 중 하나인 fetch API에 대해 간단히 알아본 내용과 기본적인 사용법에 대한 내용을 정리하였다.

참고 사이트들

MDN
How to use Fetch

Fetch API는 URL을 통해 network 요청을 해주는 API이다. Fetch API를 통해 network resource에 접근이 가능하고 HTTP 요청, 파일 다운로드 및 업로드 등의 작업을 가능하게 해 준다.

// ! Syntax
const fetchResponsePromise = fetch(resource [, init])

• Parameters
  • resource : URL 또는 Request object
  • options : request에 추가적으로 적용하고 싶은 custom setting 이 포함된 Object라고 한다. options로 들어가는 항목은 아래와 같다
    • method : 사용할 메서드 ('GET', 'POST', 'PUT', 'DELETE')
    • headers : 헤더에 전달할 값
    • body : 바디에 전달할 값 (JSON.stringfy(data))
    • mpde : cprse, no-corse 등의 설정
    • credentials : 자격 증명을 위한 옵션 설정
    • cache : 케쉬 사용 여부
  • Return Value : Promise 객체를 반환한다. 요청이 완료되면 promise가 Response 객체로 resolve 된다
  • 만약 Network 문제로 인해 요청이 실패하면 promise는 rejected 된다.

[fetch 사용법을 알아보자]

1. fetch HTTP request

/* fetch를 사용하여 확이하는 방법들*/

const newsURL="어떤 뉴스 url"
const weatherURL="어떤 날씨 url"

fetch(newsURL) 
    .then(console.log)    

fetch는 Response Object를 반환한다.

아래의 콘솔 창 결과를 보면 Response 객체가 출력된 것을 볼 수 있다.

Response 객체는 body , header , type , url , redirected , status.. 등등 다양한 속성을 갖고 있다.

이에 대한 자세한 정보는 MDN을 확인해보자

2. Fetching JSON : Responce.json()

Returns a promise that resolves with the result of parsing the response body text as JSON.

response로부터 JSON 객체를 추출하고 promise형태로 return 한다.

/* fetch를 사용하여 확이하는 방법들*/

fetch(newsURL) // json() 메소드르 사용하여 JSON 형태로 변형 후 출력해본다.
    .then((response)=>response.json())
        .then(console.log)

아래의 콘솔 창은 response를 JSON으로 추출하고 console.log로 출력한 결과이다.

response.json() 이외에도 유용한 response method가 많다. 아직 써보지는 않았지만 공부 겸 간단하게 정리하면 아래와 같다.

• response.text() : rwa text로 resolve 된 promise를 반환한다
• response.formData() : FormData로 resolve된 promise를 반환한다.
• response.blob() : Blob으로 resolve 된 promise 반환
• response.arrayBuffer() : ArrayBuffer로 resolve 된 promise

3. 변수로 받아서 출력

변수로 받아오게 되면 promise가 (당연히) 할당이 되고 출력하면 아직 pending 상태인 promise가 출력된다.

/* fetch를 사용하여 확이하는 방법들*/


// 3 변수로 weater 정보도 받아오고 출력을 해본다.
const news = fetch(newsURL) //
    .then((response) => response.json())
    .catch(console.log);

  const weather = fetch(weatherURL) //
    .then((response) => response.json())
    .catch(console.log);

  console.log(news);
  console.log(weather);

 

4. Handling fetch error

fetch는 HTTP 요청이 false인 상태여도 error를 보내지 않고 완료된 HTTP request로 간주한다.

fetch는 일반적으로 권한(Permission 또는 이와 유사한) 문제 같은 경위의 네트워크 오류의 경우에만 reject를 한다. 이로 인해 404와 같은 HTTP error도 완료된 request로 간주된다. 이를 확인할 수 있는 방법은 response 속성 중 response.ok가 false인지 true인지를 통해 판별할 수 있다. response.ok는 오직 status가 200-299인 경우에만 true 값을 갖는다. mdn에 따르면 then() handler로 response.ok 또는 response.status 속성을 확인해야 한다고 한다.

(참고 문서의 예제를 참조하였다.)

async function fetchMoviesBadStatus() {
  const response = await fetch('/oops');
  if (!response.ok) {
    const message = `An error has occured: ${response.status}`;
    throw new Error(message);
  }

위의 코드와 같이 response.ok의 상태에 따라 error 처리를 해줄 수 있다.

이번 포스팅은 fetch 사용에 대한 기본적인 방법들에 대해 정리를 해보았다. 추후에 조금 더 깊이 있는 내용으로 정리를 해보겠다.