[Js] fetch를 이용한 요청 및 응답

17 Nov 2022 in Development on Javascript

• fetch란?
  • fetch 구조
• fetch 사용 예시
• Reference

fetch란?

---

fetch()메서드를 이용해서 Javascript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있게 해주며 Promise기반으로 구성되어 있다. 만약 Promise에 대한 이해가 부족한 경우 promise에 대한 이해를 한번 참고하면 좋을꺼 같다.

fetch 구조

fetch(
  url,
  {option}
).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

• 파라미터로 요청 할 url을 설정하고 option을 통해 method body, headers등 필요한 정보를 담아서 요청
  • method: HTTP method요청방식을 의미 (GET, POST, PUT, DELETE)
  • headers: 요청 헤더에 대한 정보
  • body: 요청 데이터
• then로 응답 객체 받음
• catch로 에러 객체 받음

fetch 사용 예시

---

url은 개인적 주소가 담겨 있어서 가렸으며 서버쪽으로 데이터를 보낸 후 / 경로로 이동하는 코드를 작성해보았다.

 fetch(
      'url',
      {
        method: 'POST',
        body: JSON.stringify(meetupData),
        headers: {
          'Content-Type': 'application/json',
        },
      }
    ).then(() => {
      navigate('/', { replcae: true });
    });

Reference

---

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
https://ljtaek2.tistory.com/130