fetch API

리액트로 axios를 써봤지만 서버와 통신을 해봤지만 바닐라로 fetch만 사용해서 서버와 통신하라고 좀 버벅인 느낌이 있어서 정리

개념부터 차근차근 알아보는 것은 아니고 실제로 사용한 코드를 보면서 어떻게 사용한다 라는 느낌

fetch

보통 콜백지옥을 벗어나고 가독성을 높이기 위해 async/await와 같이 쓰인다

async function check () {
  const response = await fetch('url')
}

이렇게 fetch의 url외에 파라미터로 아무것도 넣지않고 호출하면 get메서드로 요청된다

서버와 통신하는 과정에서 에러가 날 수도 있고 실제로 그렇게 된다면 사용자에게 에러를 알려주어야한다

에러 핸들링

async function check () {
  const response = await fetch('url')

  if(response.ok){
    // 요청 성공
  } else // 요청 실패
}

fetch로 보낸 요청은 그 요청이 성공이든 실패든 response에 값을 담아온다

response.ok는 boolean 값으로 http status 코드가 200~299일 때 즉, 성공 적으로 응답을 받았다면 true 그렇지 않다면 false를 반환한다

추가 메서드

요청에 성공한 response는 추가로 제공되는 몇개의 메서드로 데이터를 가공해서 받아올 수 있다

async function check () {
  const response = await fetch('url')

  if(response.ok){
    return await response.json()
  } 
  return new Error(`${response.status} error`)
}

추가 메서드로는 text, formData, body 등 다양하게 있는데 보통은 JSON형식으로 많이 주고 받는다

자세한 설명은 이 곳에서 볼 수 있다

응답 헤더

받은 응답의 response.headers로 헤더에도 접근할 수 있다

async function check () {
  const response = await fetch('url')

  if(response.ok){
    response.headers.get('Content-Type') 

  } 
  return new Error(`${response.status} error`)
}

요청 헤더

응답의 헤더를 얻을 수 있다면 요청할 때 헤더에 무언가 담아서 보내는 것도 가능하다

보통 토큰 인증 방식을 이용할 때 web Storage에 토큰 정보를 저장해둔다면 get 메서드 요청을 보낼 때 헤더에 token을 담아서 보낸다

async function check (token) {
  const response = await fetch('url', {
        header: {
          Authentication : token
        }
  }) 
     if(response.ok){

  } 
  return new Error(`${response.status} error`)
}

POST

여태까지는 전부 get 메서드였는데 POST도 같은 방식으로 보낼 수 있다

async function login (userdata) {
  const response = await fetch('url', {
        method: 'POST',
        headers: {'Content-type': 'application/json'},
        body: JSON.stringify(userdata)
  }) 
     if(response.ok){

  } 
  return new Error(`${response.status} error`)
}

포스트로 요청을 날릴 때는 body에 데이터가 반드시 존재해야한다

그리고 그 body의 속성값을 설정해주는 헤더값도 설정이 필요한데 설정해주지 않는다면 기본값인 text/plain;charset=UTF-8로 설정되어서 서버로 보낸다

JSON 형태로 서버에 보내고 있기 때문에 헤더에서 콘텐츠 타입을 명시해주었다