javaScript-fetch()

fetch(주소, 옵션)

네트워크를 통해 리소스의 요청(Request) 및 응답(Response)을 처리할 수 있다.

Promise 인스턴스를 반환한다.

 

 

 

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    userId: 1,
    id: 101,
    title: 'Custom Title',
    body: 'This is the body of the post.'
  })
})
  .then(response => response.json())
  .then(data => {
    console.log(data); // 서버로부터 받은 데이터 출력
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

하나씩 보자, 

 

fetch() 함수의 파라미터에 주소, 옵션을 넣을 수 있다고 했다.

 

api 주소가 들어가고, 옵션으로 method, headers, body를 옵션으로 넣을 수 있다.

 

참고로 이 옵션들은 여러가지가 있지만 예시로 세개만 들어보자.

 

method (메서드):
이 옵션은 HTTP 요청의 메서드를 설정한다.

주로 'GET', 'POST', 'PUT', 'DELETE' 등의 값을 사용한다.

headers (헤더):
이 옵션은 HTTP 요청 헤더를 설정한다. 

헤더는 추가적인 요청 정보를 담는데 사용된다. 일반적으로 'Content-Type', 'Authorization' 등이 포함될 수 있다.

body (바디):
이 옵션은 HTTP 요청의 본문(body) 데이터를 설정합니다. 

주로 POST나 PUT 요청과 함께 전송된다. 데이터는 문자열 형태로 전달되며, 보통 JSON 데이터를 JSON.stringify() 함수로 문자열로 변환하여 사용한다.

---

 

쉽게 말하면 

 

만약 게시글을 올릴 때에는 메서드 옵션에 post를, 

게시글을 삭제할 때는 delete를,

 

헤더 옵션은 HTTP 요청하는 헤더이므로 서버는 이 헤더에 응답한다.

 

바디 옵션은 만약 게시글을 등록한다고 가정할 때 HTTP 요청에 메서드 옵션 post와 요청 헤더와 게시글의 내용, 데이터를 같이 보낸다고 생각하면 편하다.

 

 

 

---

 

오 그러면 api 연결이 필요할 때 쓰면 되겠네 ?!

맞다.

 

하지만 fetch() 함수는 네이티브 자바스크립트에서 제공하는 네트워크 요청을 위한 가장 기본적인 함수이므로

 

더 편리하게 api와 연결하고 여러 기능을 제공하는 라이브러리도 적절히 사용해보자.

 

흔히 쓰는 api 라이브러리는 Axios, jQuery.ajax 등등이 있다.