[JS] Fetch

Fetch

https://velog.io/@zero_mountain/JS-fetch%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드이다. XMLHttpRequest와 비슷하지만 fetch는 Promise를 기반으로 구성되어 있어서 더 간편하게 사용할 수 있다는 차이점이 있습니다.

XMLHttpRequest란?
XMLHttpRequest를 이용하면 웹 페이지를 전부 로딩하고도 서버로부터 데이터를 요청하거나 전송받을 수 있으며, 웹 페이지를 전부 로딩하지 않고도 일부만을 갱신하는 게 가능해진다. 따라서, AJAX는 JavaScript를 사용한 비동기 통신, 클라이언트와 서버 간에 XML 데이터를 주고받는 기술이라고 할 수 있다.

기본  구조

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

기본적인 구조와 동작은 Promise 객체와 동일하다.

요청 정보 파라미터

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

fetch(url, {
   method: 'post',
   headers: {
     "Content-type": "application/json; charset=UTF-8"
   },
   body: 'memberId=id001&memberName=myName'
})
.then(res => {
  console.log(res);
})
.catch(error => console.log(error));

- method : HTTP method와 동일하며 요청 방식을 나타낸다. (GET, POST, PUT, DELETE 등)

- headers : 요청 헤더에 대한 정보를 나타낸다.

- body : 요청을 보내는 데이터를 나타낸다. 여러 가지 자료형을 대입할 수 있다.

GET 요청

fetch("https://jsonplaceholder.typicode.com/posts/1")
	.then((response) => response.json())
	.then((json) => console.log(json))

response는 promise타입으로 반환되며 response.json()은 데이터를 자바스크립트 객체타입으로 반환해줍니다.

POST 요청

fetch(url, {
  method: 'POST',
  body: JSON.stringify({ name: "Test" })
})
.then(res => {
  if (res.status === 200) {
    res.text().then(text => console.log(text)
  }
  else {
    console.log(res.statusText)
  }
})
.catch(error => console.log(error))

- POST로 body안에 데이터를 넣고, 요청을 보내주면 응답 객체 res를 받게 되는데 res 안에는 응답에 관한 정보가 존재한다.

- status는 요청이 성공인지 실패인지를 판별할 수 있게 해주는 요소이다.

- 응답에 대한 내용은 res.text()를 통해 확인할 수 있다.

- text() 외에도 arrayBuffer, blob, json, formData 등의 메서드를 사용하여 값을 볼 수도 있다.

- GET, PUT, DELETE 요청도 같은 방식으로 보낼 수 있다. 

- 단, GET, DELETE 요청은 url 파라미터 하나만 입력하여 사용한다.