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 |