🔎 fetch()

fetch() 사용법

• 첫 번째 인자로 URL, 두번째 인자로 옵션 객체를 받고 Promise 타입의 객체를 반환한다.
• 반환된 객체는 API 호출이 성공했을 경우 응답 객체를 resolve하고 실패했을 경우 예외 객체를 reject 한다.
• 옵션 객체에는 HTTP 방식(method), HTTP 요청 헤더(headers), HTTP 요청 전문(body) 등을 설정해준다.
• 응답 객체로부터는 HTTP 응답 상태(status), HTTP 응답 헤더(headers), HTTP 응답 전문(body) 등을 읽어올 수 있다.

fetch(url, options)
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error));

fetch()로 HTTP 요청하기

1. GET: 존재하는 자원 요청

   • 단순히 원격 API에 있는 데이터를 가져올 때 사용한다.
   • 디폴트로 GET 방식으로 작동하며 옵션 인자가 필요 없다.
   • 응답 객체는 json()을 제공하고 이 메서드를 호출하면 응답 객체로부터 JSON 형태의 데이터를 자바스크립트 객체로 변환하여 얻을 수 있다.

   fetch(url)
   	.then((response) => response.json())
   	.then((data) => console.log(data))

2. POST: 새로운 자원 생성 요청

   • 데이터를 만들어 보낼 때는 POSt 메서드를 사용한다.
   • 새로운 포스트 생성을 위해서 method를 POST로 지정한다.
   • headers 옵션으로 JSON 포맷을 사용한다고 알려주고 body 옵션에는 요청 전문을 JSON 포맷으로 넣는다.

   fetch(url, {
   	method: "POST",
   	headers: {
   		"Content-type": "application/json",
   	},
   	body: JSON.stringify({
   		title: "Test",
   		body: "Testing",
   		userId: 1
   	}),
   })
   	.then((response) => response.json())
   	.then((data) => console.log(data))

3. PUT: 존재하는 자원 변경 요청

   • API에서 관리하는 데이터의 수정을 위해 사용한다.
   • method 옵션이 PUT인 것을 제외하면 POST 방식과 비슷하다.

   fetch(url, {
   	method: "PUT",
   	headers: {
   		"Content-type": "application/json",
   	},
   	body: JSON.stringify({
   		title: "Test",
   		body: "Test end",
   		userId: 1
   	}),
   })
   	.then((response) => response.json())
   	.then((data) => console.log(data))

4. DELETE: 존재하는 자원 삭제 요청

   • 보낼 데이터가 없기 때문에 headers, body 옵션이 필요 없다.

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