[TIL] Fetch

jaeung5169·2022년 4월 6일
0

TIL

목록 보기
10/25
post-thumbnail

Fetch


  • 기존에 사용하던 XMLHttpRequest를 대체하는 비동기 통신 요청 API

  • Promise 기반으로 동작하기 때문에 promise chaning을 통해 데이터 조작이 가능하다.

  • 두 번째 인자로 요청 옵션을 설정할 수 있다.

const fetchResponsePromise = fetch(resource [, init])


init

객체 형식으로 전달되며, 사용 가능한 옵션은 아래와 같다.

  • method: 요청 방법(GET, POST...)을 설정한다. 기본값은 GET 이다.

  • mode: 요청에 사용할 모드(cors, no-cors, same-origin)를 의미한다. 기본값은 same-origin 이다.

  • cache: 캐시와 어떻게 상호작용 할 지 정하는 설정. 기본값은 default 이다.

  • credentials: cross-origin 요청에서, user agent가 다른 도메인으로부터 cookie를 전달할지 정하는 설정. 기본값은 same-origin 이다.

  • headers: 요청에 사용될 각종 정보를 담고있는 항목. 문자열로 이루어진 key-value쌍으로 되어있다.

  • redirect: redirect를 어떻게 처리할지 정하는 설정. 기본값은 follow 이다.

  • referrer: 요청이 어디서 전달되었는지 도메인을 알리는 속성. 기본값은 client 이다.

  • body: POST 요청에 사용할 데이터를 실어 보내는 속성.


주의

  • fetch() 메서드의 기본 응답은 Response 객체이다.

  • 그래서 body에 담긴 데이터를 활용하기 위해서는 객체에 내장되어있는 json() 혹은 text() 같은 메서드를 이용해서 다시 Promise를 반환해서 사용한다.

  • HTTP error가 발생하더라도 reject 되지 않고, 네트워크 에러나 요청이 완료되지 못 한 경우에만 reject 된다.

  • 에러가 생겨도 then 으로 떨어지기 때문에, response의 status code나 ok를 체크해야 한다.

  • Response.ok 는 응답 코드가 200~299 일 경우 true가 되기 때문에 유의하자.





참고 자료

Using Fetch - Web API | MDN

fetch() - Web APIs | MDN

Headers - Web APIs | MDN

0개의 댓글