[JavaScripte] - Fetch란?

비동기 통신

HTML에서 화면을 이동하려면 <a href="">방식을 사용해서 페이지 이동을 한다. 이 방식은 페이지 전체를 교체하는 것이라서 컴퓨터 입장에서는 부담이 크다. 심지어 자바스크립트는 싱글 스레드 방식이라서 하나의 스레드에서 모든 것을 돌려야 한다. 이것을 보완하기 위해서 비동기 통신이라는 개념이 등장했다. 

자바스크립트의 모든 비동기 통신 기술들을 통틀어 Ajax라고 하는데, 이것은 클라이언트와 서버간에 데이터를 주고 받는 기술이다. 

즉, 쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다. 

 

Ajax의 변화

기존에는 XMLHttpRequest 객체를 이용해서 통신을 주고 받았지만 엄청나게 번거로운 작업이였다. 불편함을 개선하기 위해 JQuery를 통해 구현하다가 fetch API가 ES6표준으로 등장하면서 fetch API를 통해 통신하는 것이 주요 방식으로 자리를 잡았다. 

서버에서 정보를 가져올 때 리액트처럼 페이지 전체를 새로 고침 하지 않아도 받아올 수 있다.

❌ 하지만 fetch는 Web API로서 인터넷 익스플로러에서만 작동이 안된다.

fetch 사용법 

fetch 함수에는 HTTP 요청을 전송할 URL과 HTTP 요청 메서드, HTTP 요청 헤더, 페이로드 등을 설정한 객체를 전달한다.

const promise = fetch(url[,options])

fetch 함수는 HTTP 응답을 나타내는 Response 객체를 래핑한 promise 객체를 반환한다.

 

1. GET 요청

fetch("URL")
  // json 메서드를 사용하여 Response 객체에서 HTTP 응답 몸체를 취득하여 역직렬화한다.
  .then(response => response.json())
  // json은 역직렬화된 HTTP 응답 몸체다.
  .then(json => console.log(json));

GET 요청을 할때는 fetch의 첫번째 인자로 URL만 적어주면 된다. 

fetch 함수는 HTTP 응답을 나타내는 Response 객체를 래핑한 프로미스를 반환하므로 후속 처리 메서드 then을 통해 프로미스가 resovle한 Response객체를 전달받을 수 있다. Response객체는 HTTP 응답을 나타내는 다양한 프로퍼티를 제공한다.

 

2. POST 요청

fetch("URL", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Test",
    body: "I am testing!",
    userId: 1,
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data))

GET 이외의 HTTP 메소드를 사용할 시 method 옵션을 명시해주어야 한다. headers에는 부가적인 정보가, body에는 POST로 보내는 데이터가 들어간다. headers에 JSON 형식을 사용한다고 알려주고 그에 맞게 body의 본문 전체를 JSON 형식으로 바꾸어 준다.

❗ headers로 json 형식임을 알려주지 않으면 서버에서 못 읽는 문제가 생길 수 있다고 한다.

 

3. PUT 요청

fetch("URL", {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Test",
    body: "I am testing!",
    userId: 1,
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data))

PUT은 전체 데이터를 교체해버리기 때문에 부분만 수정하려면 UPDATE를 사용하자

 

4. DELETE 요청

fetch("URL", {
  method: "DELETE",
})
  .then((response) => response.json())
  .then((data) => console.log(data))

해당 URL의 데이터를 지워버리라는 요청이다. 메소드만 명시해주면 된다.

 

에러 처리 방법

fetch 함수를 사용할 때는 에러 처리에 주의해야 한다.

const wrongUrl = "https://abcdefg.com/XXX";

// 부적절한 URL이 지정디었기 떄문에 404 Not Found 에러가 발생한다.
fetch(wrongUrl){
  .then(() => console.log("ok"))
  .catch(() => console.log("error"));

해당 구문을 보면 catch가 실행되어 'error'가 출력될 것 처럼 보인다. 하지만 'ok'가 출력된다.

그 이유는  fetch 함수가 반환하는 프로미스는 기본적으로 404 Not Found나 500 Internal Server Error와 같은 HTTP 에러가 발생해도 에러를 reject하지 않고 불리언 타입의 ok 상태를 false로 설정한 Response 객체를 resolve한다. 오프라인 등의 네트워크 장애나 CORS 에러에 의해 요청이 완료되지 못한 경우에만 프로미스를 reject한다.

따라서 fetch 함수를 사용할 때는 fetch함수가 반환한 프로미스가 resolve한 불리언 타입의 ok상태를 확인해 에러를 처리해야 한다.

const wrongUrl = "https://abcdefg.com/XXX";

fetch(wrongUrl)
  .then(response => {
  if(!response.ok) throw new Error(response.statusText);
  return response.json();
  })
  .then(todo => console.log(todo))
  .catch(err => console.log(err));

여기서 throw new Error란?

=> 사용자 정의 예외를 발생할 수 있다. 예외가 발생하면 throw 이후의 명령문은 실행되지 않고 첫번째 catch 블록으로 전달된다. 만약 catch가 없으면 프로그램은 종료된다.

---

참고

Fetch란 무엇인가 (velog.io)