fetch API

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있다.

Fetch API의 핵심은 인터페이스의 추상화

Fetch의 인터페이스에는 'Body', 'Headers', 'Request', 'Response'가 포함되어 있는데, 이들이 모두 자바스크립트의 객체 형태로 추상화되어 있기 때문에 이들을 더욱 쉽게 활용할 수 있도록 도와준다.

또한 Fetch API 내부에는 fetch() 메소드가 내장되어 있어서 리소스에 대한 요청을 보내고 응답을 받으면 이를 Promise에 담아 return한다.

send: (data) => { // 클라이언트에서 서버에게 POST를 요청해 서버에 게시 할 수 있도록 하는 함수 
    window.fetch(app.server, {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json'
      },
    })
      .then(response => response.json())
  },

1. method

주어진 리소스로 수행하길 원하는 행동

대표적으로 사용하는 메소드

GET
POST
PUT
DELETE

2. Body

response/request의 body를 나타내는 객체이며, content type과 그것이 어떻게 처리되어야 할지를 정의할 수 있도록 하는 인터페이스
Body는 response와 request에 의해서 이행(?)되는데 따라서 각 response와 request 객체 내부에서 body 프로퍼티에 접근이 가능

3. Header

클라이언트와 서버가 요청 또는 응답으로 부가적인 정보를 전송하는 인터페이스

4. Request

요청한 리소스를 표현해주는 인터페이스