fetch란?

전역 fetch 메서드는 네트워크에서 리소스를 취득하는 절차를 시작하고, 응답이 사용 가능해지면 이행하는 프로미스를 반환합니다. 네트워크 오류가 있을 때만 거부되어 then() 처리기로 반드시 response.ok 또는 Response.status 속성을 확인해야합니다.

구문

fetch(resource)
fetch(resource, options)

---

Fetch API란?

HTTP 요청과 응답을 자바스크립트로 접근하고 조작할 수 있는 인터페이스를 제공합니다. Fetch API 가 제공하는 fetch() 메서드로 비동기적으로 리소스를 쉽게 취득할 수도 있습니다.

Fetch API는 서비스 워커에서도 쉽게 사용할 수 있는 프로미스 기반의 개선된 대체제입니다. CORS 를 포함한 고급 개념을 HTTP 확장으로 정의합니다.

사용법

async function logJSONData() {
	const response = await fetch("http://example.com/movies.json");
	const jsonData = response.json();
	console.log(jsonData);
}

fetch() 메서드를 통한 응답은 Response 객체로 표현되며, JSON 응답 본문을 바로 반환하지는 않습니다.

JSON 본문 콘텐츠를 추출하기위해 json() 메서드를 사용하여 JSON으로 파싱한 응답 결과로 또 다른 프로미스를 반환합니다.

요청 옵션 제공

fetch 메서드의 두 번째 인자로 init 객체를 사용하면 여러가지 설정을 제어할 수 있습니다.

// POST 메서드 구현 예제
async function postData(url = '', data = {}) {
  // 옵션 기본 값은 *로 강조
  const response = await fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE 등
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/json',
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data), // body의 데이터 유형은 반드시 "Content-Type" 헤더와 일치해야 함
  });
  return response.json(); // JSON 응답을 네이티브 JavaScript 객체로 파싱
}

postData('https://example.com/answer', { answer: 42 }).then((data) => {
  console.log(data); // JSON 데이터가 `data.json()` 호출에 의해 파싱됨
});
// mdn 참고했음

취득 요청 중단

아직 완료되지 않은 fetch() 작업을 취소하려면 AbortController와 AbortSignal 이 있습니다.

const controller = new AbortController();
const signal = controller.signal;
const url = "video.mp4";

const downloadBtn = document.body.querySelector('#download');
const abortBtn = ~~: // 생략함 .. 위랑 비슷함

download.addEventListener("click", async () => {
	try{
		const response = await fetch(url, { signal });
		console.log('다운로드 완ㄹ료', responmse);

	}catch(error){
		console.log(error.message);
	}
});

abortBtn.addEventListener("click", () => {
	controller.abort();
	console.log("다운로드 중단");
});

코드를 보면 response 에 할 당할 때 fetch 메서드의 두 번째 인자로 controller.signal 을 넣었는데 signal 을 왜 넣었는지 어떻게 작동하는지 밑에서 abortBtn 클릭시 작동하는것과 연관이 있는지 signal 안넣고 작동시키면 중단이 안되는지 다음시간에 좀 더 자세하게 살펴봐야할 것 같습니다.

지금까지 비동기통신을 했지만 이벤트루프에 의해 비동기처리가 동기처리랑 어떤식으로 다르게 처리되는지 비동기적으로는 어떻게 처리되는지 그리고 사용법들을 정확히 몰랐었다. 이번기회에 http 통신에 필요한 메서드들과 API 를 좀 자세히 정리해보아야겠다.

fetch는 Promise를 포함한 더 큰 메서드인것 같다. 하지만 promise에서의 catch가 있는데 왜 겉으로 try catch 를 쓰는지 뭐가 다른건지도 좀 봐야겠다.