Javascript fetch

The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set.

fetch란 HTTP통신 규약에 맞춰 작성된 요청문을 통해 백엔드에 request를 요청, 그에 상응하는 response를 받아내는 것을 의미하는 것이다.
백엔드와 정보를 주고 받을 경우에는 무조건 "String"타입으로 데이터를 주고받아야하기 때문에, 백엔드와 프론트엔드는 각각 받은 정보를 JSON/Object 타입으로 변환해 가공, 접근해야한다.

예를 들어, 회원가입 혹은 로그인을 위해 api 통신을 진행한다고 생각해보자.
api통신의 메소드는 "POST"가 될 것이다.
스트링 타입으로 구성된 정보를 fetch를 통해 백엔드 서버로 보내고, 백엔드 서버는 해당 정보를 오브젝트 처리해 string타입의 데이터를 응답으로 보낸다. 프론트에서는 다시 해당 응답을 JSON 타입으로 전환해 정보를 가공해 UI로 노출시킨다.

fetch(“api주소”,{
  method: “POST”,
  body: JSON.stringify({
    email: this.state.id,
    password: this.state.pw,
    }),
  }

post메소드는 바디를 통해 정보 데이터를 받을 수 있다.
이렇게 받아온 데이터는 Promise를 통해 비동기적으로 처리, 데이터 결과값을 받아온 후 함수를 실행, 원하는 UI를 구성할 수 있게 된다.

fetch(“api주소”,{
  method: “POST”,
  body: JSON.stringify({
    email: this.state.id,
    password: this.state.pw,
  }),
} 
.then((res)=>response.json( ))

then을 사용해 fetch에서 받아온 데이터를 res에 담아 넘겨준다.
res는 위에서도 말했듯 데이터타입이 String이기 때문에, 접근과 가공이 용이하도록 JSON으로 변경해주는 과정을 거친다.

fetch(“api주소”,{
  method: “POST”,
  body: JSON.stringify({
    email: this.state.id,
    password: this.state.pw,
  }),
} 
.then((res)=>response.json( ))
.then((result)=>console.log(“결과값: ”, result))

JSON으로 변환된 데이터는 result라는 변수명을 가지고 두 번째 then으로 넘겨진다.
이렇게 변환된 데이터는 Object에 접근하는 방식(Dot Notation & Bracket Notation)을 이용해 접근 및 사용이 가능해진다.

Arrow Function을 사용해줬기 때문에 각 함수에 return을 굳이 해주지 않아도 되었었다.
여기서 body에 담겨있는 email, password 키 값은 백엔드에서도 동일하게 사용되기 때문에, 꼭!! 백엔드에서 사용하는 키값과 동일해야한다. 동일하지 않을 경우 key value error를 반환한다.

+)
string 타입의 데이터를 json타입의 데이터로 컴파일링 해주는 방법에는 response.json만 존재하는 것은 아니다. JSON.parse를 사용해 똑같이 JSON 타입으로 만들어 줄 수 있다.
그럼에도 불구하고 .json을 사용해주는 이유는 백엔드에서 프론트로 정보를 내려줄 때 불필요한 정보를 걸러내기 위해서이다. JSON.parse는 불필요한 정보까지 전부 변환해주기 때문에 사용하는데에 어려움을 겪을 수 있다.

+)
fetch 응답이 언제나 JSON 타입인것은 아니다. 객체 형태로 오지 않는 경우도 있기 때문에 그런 경우에 대해서도 꼭 기억하고 있어야한다.