[Ajax] fetch, axios

Chanho Yoon·2021년 3월 12일

Fetch ajax axios

React

목록 보기

2/6

이번에 진행한 위스타그램에서 백엔드 서버와 통신을 하면서 사용했던 fectch와 axios 에 대해 간단히 공부해보겠습니다.

Ajax

Ajax란

자바스크립트를 사용한 비동기 통신이며, 클라이언트와 서버와 데이터를 xml형태로 주고받는 통신방법이다.

쉽게 말해서 자바스크립트를 사용해서 서버에 데이터를 요청하는 것!

비동기?? : 데이터를 받아오는 시간동안 대기하지 않고 바로 바로 다음 로직을 수행하는 것

fetch

자바스크립트 내장 라이브러리로 따로 import해서 사용하지 않아도 된다.
React Native의 경우 업데이트가 잦아 업데이트를 쫓아오지 못하는 경우가 생기는데, Fetch는 이걸 걱정할 필요 없이 사용이 가능하다고 한다
HTTP error 상태를 reject 하지 않는다!!
body에 객체를JSON 문자열로 변환해주는 과정이 필요하다.
response를 json으로 변환해주는 과정이 필요하다.

fetch 사용 예시 - 데이터 보낼 때(POST)

fetch('url', {
      method : 'POST',
      body : JSON.stringify({
        user:this.state.loginId,
        password: this.state.loginPw
      })
    }).then((res) => res.json())
    .then((res) => res.status)

fetch 사용 예시 - 데이터 받을 때(GET)

  fetch('url', {
    method:'GET'
  }).then((res) => res.json()).then((res) => res.status)
    
  fetch('url',{}).then((res) => res.json()).then((res) => res.status)

fetch의 default method는 "GET" 이므로 생략이 가능하다.

axios

구형브라우저를 지원
응답 시간 초과를 설정 가능
JSON 데이터 자동변환이 가능하다.
catch문을 사용하여 에러처리

axios 사용 예시 - 데이터 보낼 때(POST)

  axios.post('url', {
    user: this.state.username
    password: this.state.password
  })
  .then ( (res) => res.status) 
  .catch ( (error ) => error)

axios 사용 예시 - 데이터 받을 때(GET)

    axios.get('http://localhost:3000/data/mainContentObj.json')
    .then(res => {
      this.setState({
        mainContentObj: res.data
      });
    });