[멋사] 7주차 사전과제 - fetch API

7주차 사전과제
: Promise, Fetch API, Axios 참고문서 참고해서 공부하고 정리하기

Ajax란?

Asynchronous Javascript And XML의 약어로 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로고침 하지 않고 페이지의 일부만을 가져오는 기법

Ajax의 경우 만들어진지 오래되었고, 엄청나게 번거로운 작업이 필요하다. 이러한 불편함을 개선하기 위해 JQuery를 통해 구현하기 시작하다가 fetch API가 ES6 표준으로 등장하면서 자리잡았다.
fetch API는 Promise 값을 반환하며 주문 전송, 사용자 정보 읽기, 서버에서 최신 변경분 가져오기 등 다양한 일(HTTP 요청을 처리하는)을 페이지 새로고침 없이 받아올 수 있다.

fetch API

기본 구조

fetch(url)
.then(res => {
  console.log(res)
})
.catch(error => {
  console.log(error)
})

기본적인 구조와 동작은 Promise 객체와 동일하다.
파라미터로 요청을 보낼 url을 입력해주고, 응답을 받아서 추가적인 작업 또한 해줄 수 있다.
then에서 응답 객체 res를 받고, catch에서 에러 요청이 발생했을 경우 에러를 받는다.

fetch의 두 번째 파라미터 options을 통해 요청에 대한 추가적인 데이터를 입력할 수 있다.

fetch(url, options)

첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환한다.

options 객체 항목

• method: 요청방식 메서드 ('GET', 'POST', 'PUT', 'DELETE')
• headers: 요청 헤더에 대한 정보값
• body: 요청을 보내는 데이터
• mode: 'cors' 등의 값을 설정 (cors, no-cors, same-origin)
• credentials: 자격 증명을 위한 옵션 설정 (include, same-origin, omit | default = same-origin)
• cache: 캐쉬 사용 여부 (no-cache, reload, force-cache, only-if-cached)

fetch(url, {
   method: 'POST',
   headers: { "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" },
   body: 'foo=bar&lorem=ipsum'
})
.then(res => {
  console.log(res);
})
.catch(error => console.log(error));

fetch 파라미터로 직접 입력하기도 하지만 주로 객체 변수에 저장해서 대입하는 방식으로 사용한다.

let options = {
  method: 'POST',
  headers: { "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" },
  body: 'foo=bar&lorem=ipsum'
}
fetch(url, options)
.then(...)

GET/DELETE 요청은 url 파라미터 하나만 입력해서 사용한다.

응용

GET 요청

fetch(url,{ method: 'GET' })
  .then((res) => console.log(res));

fetch(url)
  .then((res) => response.json())
  .then((data) => console.log(data)); // 자바스크립트 객체형식으로 변환된다.

fetch() 함수는 디폴트로 GET 방식으로 작용하고, 요청을 받지 않기 때문에 옵션 파라미터가 필요없다.

response 객체?

response에는 Promise를 기반으로 하는 다양한 메서드가 존재한다. 이 메서드를 사용하여 다양한 형태의 응답 본문을 처리할 수 있다.

• response.text(): 응답을 읽고 텍스트를 반환한다.
• response.json(): 응답을 JSON 형태로 피싱한다.
• response.blob(): 응답을 Blob(타입이 있는 바이너리 데이터) 형태로 변환한다.

POST 요청

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

headers에는 부가적인 정보가, body에는 POST로 보내는 데이터가 들어간다.
headers에 JSON 형식을 사용한다고 알려주고, 그에 맞게 body 본문 전체를 JSON 형식으로 바꾸어준다.

PUT 요청

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

해당 url을 수정하는 요청으로, 전체 데이터를 교체하는 방식이기 때문에 부분만 수정하려면 UPDATE를 사용해야 한다. (UPDATE 또한 POST와 비슷하다)
마찬가지로 headers에 JSON 형식을 사용한다고 알려주고, 그에 맞게 body 본문을 JSON 형식으로 바꾸어준다.

DELETE 요청

fetch(url, {
  method: 'DELETE',
}).then((res) => respond.json())
  .then((data) => console.log(data))

해당 url을 지우는 요청이다. (보낼 데이터가 없으니 메서드만 명시한다.)

결론!

fetch를 이용하면 XML보다 HTTP 요청을 더 간편하게 보낼 수 있다!