본문 바로가기

Front-end/React

fetch 란?

fetch 란?

fetch 매서드는 JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드이다.

XMLHttpRequest와 비슷하지만 fetch는 Promise를 기반으로 구성되어 있어서 더 간편하게 사용할 수 있다는 차이점이 있다.

기본 구조

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

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

파라미터로 요청을 보낼 url을 입력해 주고 응답을 받아서 추가적인 작업 또한 해줄 수 있다.

then에서 응답 객체 res를 받고, catch에서 에러 요청이 발생했을 때, 에러를 받는다.

요청 정보 파라미터

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

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));

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

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

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

 

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

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

 

POST 요청 보내고 응답받기

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

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

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

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

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

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

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

 

🎈 결론!

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

'Front-end > React' 카테고리의 다른 글

React - VScode and Chrome Settings  (0) 2021.06.15
Udemy강좌 시작 ( React Tutorial and Projects Course )  (0) 2021.06.15
props란?  (0) 2021.06.10
JSX란?  (0) 2021.06.10
Rendering이란?  (0) 2021.06.10