[JavaScript] JavaScript의 Fetch API를 이용한 리퀘스트 송신하기

 JavaScript에 있어서, XMLHttpRequest (XHR) 대신에 API로써, Fetch API라는 것을 제공하고 있다. XHR와 동등한 기능을 제공하고 있지만, Feth API는 더욱 심플하지만 강력하다. Fetch API를 사용하면 리퀘스트나 리스펀스 등 HTTP의 파라미터를 구성하는 요소를 조작할 수 있게 된다. 또한 fetch()메소드를 이용하여 비동기의 네트워크 통신을 간단하고 알기 쉽게 기재하는 것이 가능하다. 사용법을 배워보자.

 

기본적인 사용법

---

Fetch API는 Promise 베이스의 간단한 API이다. 리퀘스트하는 데는 fetch(url)을 부를 뿐이다.

fetch('file.txt')

 fetch()메소드는 Promise를 리턴한다. 그러나 이것은 단순히 HTTP 리스펀스로 실제 JSON은 아니다. Promise는 Response오브젝트로써 해결된다. 리턴된 Promise를 실제로 처리해보자.

fetch('file.txt')
    .then((response) => response.text())
    .the((text) => console.log(text))
    .catch((error) => console.log(error));

 Response객체는 몇 가지 메소드를 가지고 있다. text()메소드는 response 내용을 텍스트로써 다루는 Promise로써 반환한다. Response객체는 아래와 같은 메소드를 가지고 있다.

● arrayBuffer()

● blob()

● json()

● text()

● formData()

 각 메소드는 목적에 맞게 사용하길 바란다. Fetch API의 기본적인 사용법은 여기까지이다. 이것만으로 리퀘스트를 송신하는 것이 가능하기 때문이다.

 

fetch가 성공하였는가 조사해보자.

---

Response 객체는 ok 프로퍼티를 가지고 있다. ok 프로퍼티를 확인하는 것으로 상태코드가 200부터 299사이에 있는가, 즉 정상적으로 액세스했는가를 조사하는 것이 가능하다.

fetch('file.txt')
	.then((response) => {
    	if(response.ok){
        	return response.text(); //response를 텍스트로 변환
        }else{
        	throw new Error();
        }
    })
    .then((text) => console.log(text))
    .catch((error) => console.log(error))

 여기서 주의해야할 것은 만약 404여도 fetch메소드는 예외를 쓰로우하지 않는 것이다. fetch가 예외를 쓰로우하는 것은 네트워크 오류 등에 한한다. fetch가 성공했는지 아닌지를 확인하는데에는 ok 프로퍼티를 사용하자.

 

설정 지정하기

---

fetch메소드는 2개의 인수를 설정할 수 있다. 

const fetchResponsePromise = fetch(resource [,init])

1) resource

; 취득하고 싶은 리소스를 정의한다. 아래의 2개가 사용가능하다.

(1) 취득하고 싶은 리소스의 직접적인 url을 포함한 USVString. 브라우저에 따라 스킴으로써 blob: 과 data:를 받아들인다. 

(2) Request 객체

2) init (옵션)

; 리퀘스트에 적용하고싶은 커스터마이즈 설정을 포함한 객체이다. 2번째의 인수에 설정을 지정하는 것으로 다음과 같은 다양한 리퀘스트가 가능하다. 

(1) method : 리퀘스트할 메소드, GET, POST등. 또한 Origin 헤더는 HEAD또는 GET메소드의 읽기 리퀘스트는 설정되지 않는다.

(2) headers : 리퀘스트에 추가하고 싶은 헤더로, Headers객체나 ByteString값을 가진 객체 리터럴로 지정하자.

(3) body : 리퀘스트에 추가하고 싶은 본문이다. 여기에는 Blob, BufferSource, FormData, URLSearchParams, USVString, ReadableStream 객체 등을 사용할 수 있다.

(4) mode :  리퀘스트에 사용하고 싶은 모드이다. (예) cors, no-cors, same-origin

(5) credentials : credentials는 글자 그대로 credential의 다루는 것으로 리퀘스트에 사용하고 싶은 리퀘스트 인증정보, omit, same-origin, inclue이다. 기본값은 omit이다. 쿠키 등은 기본값으로 포함되지 않는다. 리퀘스트에 쿠키 등의 credential을 포함하고 싶은 경우는 same-origin이나 include를 지정하자.

(6) cache : 사용하고 싶은 리퀘스트의 캐시 모드.

(7) redirect : 사용할 리다이렉트 모드. follow(자동으로 리다이렉트에 따름), error(리다이렉트가 발생하면 오류와 함께 중단한다) , manual(수동으로 리다이렉트를 처리)

(8) refferer : USVString에 리퀘스트의 리터럴을 지정한다. 이것은 같은 객체의 URL, about:client, 빈 문자열 중 하나를 취할 수 있다.

(9) referrerPolicy : 리퀘스트에 사용할 리퍼럴 폴리시를 지정한다. 사용가능한 값은, no-referrer, no-referrer-when-downgrade, smae-origin, origin, strict-orgin, origin-when-cross-origin, strict-origin-when-cross-origin, 또는 unsade-url등이 있다.

(10) integrity : 리소스에 subresource integrity값을 포함하는 것이 가능하다.

(11) keepalive : keepalive 객체는 페이지보다 길게 유지되는 요청을 허용하는 데에 사용한다. keepalive 플래그가 같은 Fetch는 Navigator.sendBeacon() API의 대체제이다.

(12) signal : AbortSignal 객체의 인스턴스이다. 즉 AbortController 경유로 fetch 리퀘스트를 통신하거나 바라는 경우에는 중지하는 것이 가능하다.

아래는 하나의 예이다.

fetch('file.txt', {
  method: 'GET',
  mode: 'same-origin',
  credentials: 'include'
})
  .then((response) => response.text())
  .then((text) => console.log(text))
  .catch((error) => console.log(error));

 method는 문자대로 메소드를 지정한다. GET이나 POST등 필요한 것을 구성해 설정하자. mode는 리퀘스트의 모드이다. no-cors, cors, same-origin 지정이 가능하다. CORS통신에 의한 크로스 도메인 통신을 할 때는 여기서 cors를 지정한다.

 

 

헤더(header)나 바디(body) 지정하기

---

 리퀘스트의 헤더나 바디를 지정하는 것도 가능하다.

const myHeaders = new Headers();
myHeaders.append('Content-Type', 'text/plain');

const myBody = 'my body';

fetch('api', {
  method: 'POST',
  header: myHeaders,
  body: myBody
});

 그러나 메소드나 GET/HEAD인 경우 바디(body)는 지정할 수 없다. Headers오브젝트는 단순히 Map이다. 값을 추가하거나 취득하는 것이 가능하다. 바디는 다음 중 하나의 객체이다.

● ArrayBuffer

● ArrayBufferView

● Blob

● File

● 문자열

● URLSearchParmas

■ FormData

---

참고자료

developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch

developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch

javascript.keicode.com/newjs/fetch.php

sbfl.net/blog/2017/01/29/fetch-api/