자바스크립트 Axios()

Jemin·2023년 5월 17일
APIaxios자바스크립트프론트엔드
0

프론트엔드

목록 보기
7/51
post-thumbnail

정글에서 팀 프로젝트를 진행했을 때 axios함수를 사용했었는데, 당시에는 시간이 촉박해서 사용 방법만 보고 지나갔던 기억이 있다. 이번에 정확하게 이해하기 위해 학습한 내용을 정리해보려 한다.

참고자료:
[React] axios란? (feat. Fetch API)
fetch와 axios 차이점과 비교
ChatGPT😗

Fetch와 Axios의 차이점

이전에 fetch를 정리한 글을 포스팅 했었는데, axios와 마찬가지로 API를 호출할 때 사용되는 fetch와 어떤 점이 다른지부터 알아보기로 했다.

fetch함수와 axios함수는 둘 다 자바스크립트에서 HTTP 요청을 보내는 데 사용되는 함수다. 그러나 두 함수는 몇 가지 차이점이 있다.

  1. API의 사용성: axios는 사용하기 쉬운 API를 제공한다. Promise기반의 인터페이스로 작성되어 있으며, 요청과 응답을 보다 간편하게 다룰 수 있다. 반면에 fetch는 좀 더 기본적인 인터페이스를 제공하므로 조금 더 많은 코드 작성이 필요할 수 있다.

  2. 브라우저 호환성: fetch는 최신 브라우저에서 기본적으로 제공되는 웹 API다. 하지만 오래된 브라우저에서는 지원되지 않을 수 있다. 반면에 axios는 자바스크립트 모듈이므로 브라우저 호환성에 더 좋은 지원을 제공한다. 또한, Node.js에서도 사용할 수 있다.

  3. 요청 취소 기능: axios는 요청을 취소하는 기능을 내장하고 있어서 필요한 경우 요청을 중단할 수 있다. fetch는 이러한 기능을 기본적으로 제공하지 않으므로 요청을 취소하려면 추가적인 작업이 필요하다.

  4. 기본 설정: axios는 기본적으로 JSON데이터를 자동으로 직렬화하고, 응답 데이터도 자동으로 JSON형식으로 변환한다. 반면에 fetch는 이러한 기능을 기본적으로 제공하지 않으므로 수동으로 처리해야 한다.

두 함수는 각각의 장단점을 가지고 있으며, 사용 환경과 요구사항에 따라 선택할 수 있다. fetch는 웹 표준에 준수하고 브라우저에서 기본적으로 사용할 수 있는 장점이 있으며, axios는 사용하기 쉽고 추가 기능을 제공하는 장점이 있다.

axios가 사용하기 더 쉽다는데 코드상으로 어떤 차이가 있는지 보자.

Fetch

//fetch
const url ='http://localhost3000/test`
const option ={
   method:'POST',
   header:{
     'Accept':'application/json',
     'Content-Type':'application/json';charset=UTP-8'
  },
  body:JSON.stringify({
  	name:'sewon',
    	age:20
  })

  fetch(url,options)
  	.then(response => console.log(response))

Axios

//axios
const option ={
  url ='http://localhost3000/test`
   method:'POST',
   header:{
     'Accept':'application/json',
     'Content-Type':'application/json';charset=UTP-8'
  },
  data:{
  	name:'sewon',
    	age:20
  }

  axios(options)
  	.then(response => console.log(response))

두 코드의 차이점을 보자면,

  • fetch()는 body프로퍼티를 사용하고, axios()는 data프로퍼티를 사용한다.

  • fetch()의 url이 fetch()함수의 인자로 들어가고, axios에서는 url이 option객체로 들어간다.

  • fetch()에서 body부분은 stringify()로 구성된다.

이처럼 axios는 HTTP 통신의 요구사항을 컴팩트한 패키지로써 사용하기 쉽게 설계되었다.

요약
axios: 간편하다, 호환성이 좋다, 요청 중단 기능이 있다, 자동으로 JSON형식으로 변환한다.
fetch: 브라우저에서 기본적으로 제공돼서 별도의 설치가 필요하지 않다.

간단하게 정리해보니 fetch보다 axios가 월등히 좋아 보인다.😅

Ajax란?

React에서 HTTP 통신에 대해서 더 깊이 알아보기 위해 Ajax도 살짝 짚고 넘어가자.
Ajax란, 자바스크립트의 라이브러리 중 하나이며, Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이며, 자바스크립트를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.

정리하자면, 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다.

Axios란?

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.

Axios 특징

  • 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 HTTP API 사용

  • Promise(ES6) API 사용

  • 요청과 응답 데이터의 변형

  • HTTP 요청 취소 및 요청과 응답을 JSON형태로 자동 변경

Axios 설치

yarn add axios
import axios from 'axios';

HTTP Methods

클라이언트가 웹서버에게 사용자 요청의 목적/종류를 알리는 수단.

GET

GET: 입력한 url에 존재하는 자원에 대한 조회(read) 요청을 한다.

GET은 서버에서 어떤 데이터를 가져와서 보여준다거나 하는 용도이다.
주소에 있는 쿼리스트링을 활용해서 정보를 전달하는 것이지 GET 메서드는 값이나 상태등을 바꿀 수 없다.

// 문법
axios.get(url, { config });
// 예제 코드
import axios from 'axios';

axios.get("url end point")
  .then((response) => {console.log(response.date)})
  .catch((error) => {console.log(error)});

/*
[
  { id: 1, pw: '1234', name: 'sewon' },
  { id: 2, pw: '1234', name: 'hongil' },
  { id: 3, pw: '1234', name: 'daeyeon' }
]
*/

응답이 json형태로 넘어온다.

POST

POST: 새로운 리소스를 생성(create)할 때 사용한다.

POST를 사용하면 주소창에 쿼리스트링이 남지 않기 때문에 GET보다 안전하다.

// 문법
axios.post(url, { data객체 }, { config });

POST메서드의 첫 번째 인자로 주소가 들어가고, 두 번째 인자는 본문으로 보낼 데이터를 설정한 객체 리터럴을 전달한다. 세 번째 인자로는 요청할 때 사용될 설정을 넣을 수 있다.

// 예제 코드
axios
  .post(
    "url end point",
    {
      contact: "Sewon",
      email: "sewon@gmail.com",
    },
    {
      headers: {
        "Content-type": "application/json",
        "Accept": "application/json",
      },
    }
  )
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.log(error);
  });

DELETE

REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 삭제하는 목적으로 사용한다.

DELETE메서드는 서버에 있는 데이터베이스의 내용을 삭제하는 것을 주 목적으로 하기에 두 번째 인자를 아예 전달하지 않는다.

// 문법
axios.delete(url, { config });
// 예제 코드
axios
  .delete("url end point")
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    throw new Error(error);
  });

PUT

REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 갱신하는 목적으로 사용된다.

PUT메서드는 서버에 있는 데이터베이스의 내용을 변경하는 것을 주 목적으로 하고 있다.

// 문법
axios.put(url, { data }, { config });
// 예제 코드
axios.put('url end point', {
  name: 'John Doe',
  age: 30
})
.then((response) => {
  console.log(response.data);
})
.catch((error) => {
  console.log(error);
});

config 객체

config객체에는 다양한 속성을 사용할 수 있다.

  • "url": 요청을 보낼 URL을 지정한다.

  • "method": HTTP 요청 메서드를 지정한다. 기본값은 GET

  • "params": 쿼리 매개변수를 설정한다. 예를 들어, { params: { page:1, limit: 10 } }과 같이 사용하여 URL에 ?page=1&limit=10과 같은 형태로 쿼리 매개변수를 추가할 수 있다.

  • "data": 요청 본문에 포함할 데이터를 설정한다. 일반적으로 POST요청에 사용된다.

  • "headers": 요청 헤더를 설정한다. 예를 들어, { headers: { "Content-Type": "application/json" } }과 같이 사용하여 헤더를 추가할 수 있다.

  • "timeout": 요청의 최대 대기 시간을 설정한다. 일정 시간 동안 응답이 없을 경우 요청이 취소된다.

  • "auth": 요청에 사용할 인증 정보를 설정한다. { auth: { username: "username", password: "password" } }와 같이 사용하여 기본 인증 또는 토큰 인증을 설정할 수 있다.

이외에도 "baseURL", "validateStatus", "responseType", "transformRequest", "transformResponse"등 다양한 속성을 사용할 수 있으며, Axios의 문서에서 더 자세한 정보를 확인할 수 있다.

Axios 문서: Axios

마무리

이렇게 Axios에 대해서 학습한 내용을 다 정리했다.🎉
React를 사용한다면 Axios를 사용해야하는 경우가 많기 때문에, 이렇게 한번 다 정리해놓으면 나중에 기억나지 않더라도 금방 복기할 수 있을 것이다.📚

profile
Jemin
꾸준하게
이전 포스트

자바스크립트 fetch()

다음 포스트

React 프로젝트에서 Axios 사용해보기

0개의 댓글