[Ajax] fetch, axios

chyoon0512·2021년 3월 12일
0

React

목록 보기
2/2
post-thumbnail

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

Ajax

Ajax란

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

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

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

fetch

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

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)

fetchdefault 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
      });
    });

fetch 와 axios 차이점

fetch 성공시 넘어오는 res

axios 성공시 넘어오는 res

axios 같은 경우 요청 성공시 config,data,headers,status 값등이 넘어오는 반면에 fetch 는 요청 성공시 넘어오는 json 객체 값만 넘어온다.

0개의 댓글