axios

양은지·2023년 4월 5일

React

목록 보기

18/27

fetch-api vs. axios

// fetch

const url = 'http://localhost:8000';
const options = {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8'
  },
  body: JSON.stringify({
    a: 10,
    b: 20
  })
};

fetch(url, options)
  .then(response => {
    console.log(response.status);
  });

// axios

const options = {
  url: 'http://localhost/test.htm',
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8'
  },
  data: {
    a: 10,
    b: 20
  }
};

axios(options)
  .then(response => {
    console.log(response.status);
  });

fetch-api 와 axios 모두 api 연동을 위한 라이브러리이다
- fetch-api 는 JavaScript built-in library
- axios 는 external library로 설치 필요
편의성 측면에서 두 라이브러리의 가장 큰 차이점은 전달하는 데이터(body, data)를 자동으로 JSON 타입으로 변환해주느냐 아니냐의 차이
- axios는 자동 변환
또한, 브라우저 호환성 측면에서 axios 지원 범위가 더 넓다
- fetch: Chrome 42+, Firefox 39+등과 같은 한정된 브라우저에서만 가능
- axios: IE11과 같이 오래된 모든 브라우저에서 지원 가능

axios 개요

axios란 Promise 기반의 HTTP client
axios의 장점
- 오래된 브라우저에서도 지원한다
- 요청 중단이 가능하다
- reponse timeout을 쉽게 지정할 수 있다
- CSRF 보호 기능이 내장되어 있다
- upload progress를 지원한다
- JSON을 자동 변환해준다

axios get(w/o params)

axios.get('url')
  .then((res) => {
    console.log(res); // response
  })
  .catch((err) => {
    console.error(err); // 오류 발생 시 실행
  })
  .then(() => {
    console.log('executed'); // 항상 실행
  });

axios get(with params)

axios.get("url", {
      params: {
        id: 123
      }
    })
    .then(function (res) {
         console.log(res) // response  
    }).catch(function (err) {
        console.error(err) // 오류발생시 실행
    }).then(function() {
        console.log('executed') // 항상 실행
    });

파라미터 데이터를 포함하여 get 요청을 할 경우 params: {} 객체에 넣어 요청한다(사용자 번호에 따른 조회 등의 요청)

axios post

axios.post('url',
  {
    contact: 'contact',
    email: 'contact@email.com'
  },
  {
    headers:{
      'Content-type': 'application/json',
      'Accept': 'application/json'
    }
  }
)
  .then((response) => {
    console.log(response.data);
  })
  .catch((response) => {
    console.log('Error!)
  });

post method에서는 일반적으로 데이터를 Message body에 포함시켜 보낸다

axios put

axios.put("url", {
        username: "",
        password: ""
    })
    .then(function (res) {
         console.log(res) // response  
    }).catch(function (err) {
        console.error(err) // 오류발생시 실행
    }).then(function() {
        console.log('executed') // 항상 실행
    });

put method는 서버 내부적으로 get -> post 과정을 거치므로 post method와 형태가 비슷하다

axios delete

axios.delete('/user?ID=12345')
    .then(function (res) {
         console.log(res) // response  
    }).catch(function (err) {
        console.error(err) // 오류발생시 실행
    }).then(function() {
        console.log('executed') // 항상 실행
    });

delete method는 일반적으로 body가 비어 있다
get과 비슷한 형태를 띄지만 delete method가 서버에 요청될 경우 서버 내에서 delete process를 진행한다

axios delete(많은 데이터 요청 시)

axios.delete('/user?ID=12345', {
      data: {
        post_id: 1,
        comment_id: 13,
        username: "foo"
      }
	})
    .then(function (res) {
         console.log(res) // response  
    }).catch(function (err) {
        console.error(err) // 오류발생시 실행
    }).then(function() {
        console.log('executed') // 항상 실행
    });