Axios

주요 HTTP 통신방법

왜 React에서 주로 Axios를 이용해 통신하는지, HTTP 통신을 가능하게 하는 Ajax와 Fetch와 비교해보자.

Ajax

• Ajax는 Asynchronous JavaScript And XML의 약자로, 말 그대로 자바스크립트에서 비동기적 통신을 가능하게 한다.
• 순수 Ajax는 XMLHttpRequest()생성자를 통해 자바스크립트에서 구현될 수 있지만 JQuery를 통해 Ajax를 보다 쉽게 쓸 수 있기 때문에 주로 JQuery와 함께 쓰인다.
• 그러나 Promise 기반이 아니고 JQuery를 사용하지 않으면 쉽게 구현하기 어렵다는 단점이 있다.

React에서 promise가 async, await과 사용될 때 그 장점을 생각해보면 Ajax는 매력적이지 않다.

Fetch

Fetch는 ES6부터 자바스크립트의 내장 라이브러리로 들어왔다.

• Promise기반으로 만들어졌다.
• 내장 라이브러리이기 때문에 별도의 모듈 설치가 필요하지 않다.

코드 또한 단순하다.

fetch(url, options)
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error));

브라우저 호환성이 떨어지고 response timeout 처리 방법이 없는 등 기능적인 부분이 상대적으로 부족하다.

그럼에도 내장 라이브러리인만큼 안정적이지 않은 프레임워크에선 유용하게 사용하기 좋다

Axios

Axios는 node.js와 브라우저를 위한 HTTP 통신 라이브러리다.

Fetch처럼 Promise를 지원한다는 공통점이 있지만 Fetch와는 달리 브라우저 호환성이 좋고 편리하며 기능이 많다.

라이브러리 설치가 필요하다는 단점(?)이 있지만 Fetch에 비해 기능상으로 더 디테일하다는 큰 장점이 있다.

그래서 React에서 HTTP 통신을 할 때엔 주로 Axios를 이용한다.

promise기반에 호환성이 좋고 디테일한 기능들을 사용할 수 있기 때문이다.

---

Axios

시작하기 | Axios Docs

Axios란?

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

특징

• 브라우저를 위해 XMLHttpRequests 생성
• node.js를 위해 http 요청 생성
• Promise API를 지원
• 요청 및 응답 인터셉트
• 요청 및 응답 데이터 변환
• 요청 취소
• JSON 데이터 자동 변환
• XSRF를 막기위한 클라이언트 사이드 지원

Axios 사용법

전반적으로 axios를 통해 서버와 소통하는 과정은 아래와 같이 두 단계로 이뤄진다.

1. 서버에 요청(request)을 보내고
2. 서버로부터 응답(response)이 오면 제대로 응답이 왔을 때와 못 왔을 때를 구분하여 처리

서버에 요청을 보냈을 때 응답이 오기까지 시간이 걸리므로 서버에 보내는 요청은 비동기 처리를 해주며, 그 이후에 응답을 바탕으로 처리하는 과정은 .then 이나 await를 이용한다.

HTTP 메소드 4가지를 주로 request로 사용한다.

1. GET
2. POST
3. PUT
4. DELETE

이 네 가지 메소드를 사용하기 위해서는 아래와 같이 함께 보내야 하는 데이터가 있다.

1. 사용할 메소드
2. url
3. data (선택)
4. params (선택)

axios({
    //request
    method: "get",
    url: "url",
    responseType: "type"
}).then(function (response) {
    // response Action
});

Axios 설치

자신이 사용하는 패키지 매니저로 프로젝트에 추가하고 사용할 파일에서 불러온다.

npm i axios

import axios from 'axios'

GET

입력한 url에 존재하는 자원에 요청을 한다.

axios.get(url,[,config])

• 지정된 단순 데이터 요청을 수행하는 경우 ➡️ url만 파라미터로 넘긴다.

async function getData() {
  try {
    //응답 성공
    const response = await axios.get('url');
    console.log(response);
  } catch (error) {
    //응답 실패
    console.error(error);
  }
}

• 사용자에 따라 다른 데이터를 불러오는 경우 ➡️ url과 함께 prams:{} 객체 리터럴도 파라미터로 넘긴다.

async function getData() {
  try {
    //응답 성공
    const response = await axios.get('url',{
      params:{
        //url 뒤에 붙는 param id값
        id: 12345
      }
    });
    console.log(response);
  } catch (error) {
    //응답 실패
    console.error(error);
  }
}

Get이 데이터를 받아오는 것이라고 했는데, 로그인을 구현할때 GET을 사용 한 경우에는?

www.example.com/login?id=userid&pw=userpw

웹 사이트 뒤에 쿼리스트링이 붙여진 것을 확인할 수 있다.

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

// example
import axios from 'axios';

axios.get('https://example.com/list').then((response)=>{
    console.log(response.data);
}).catch((Error)=>{
    console.log(Error);
})

[
  // example 
  { id: 1, pw: '1234', name: 'hello' },
  { id: 2, pw: '1234', name: 'hi' },
  { id: 3, pw: '1234', name: 'welcome' }
]

GET으로 요청해 JSON데이터로 받아온 걸 확인할 수 있다.

POST

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

axios.post("url주소",{
    data객체
},[,config])

post 메소드의 두 번째 인자는 본문으로 보낼 데이터를 설정한 객체 리터럴을 전달한다.

Post는 새로운 리소스를 생성할 때 사용되는데 그러면 언제 POST를 사용하는가?

• 로그인, 회원가입 등 사용자가 생성한 파일을 서버에다가 업로드할때 사용한다.
• POST를 사용하면 주소창에 쿼리스트링이 남지 않기때문에 GET보다 안전하다.

async function postData() {
  try {
    //응답 성공 
    const response = await axios.post('url',{
      	//보내고자 하는 데이터 
        id: id,
        password: password
    }, { withCredentials: true, });
    console.log(response);
  } catch (error) {
    //응답 실패
    console.error(error);
  }
}

DELETE

Delete메소드는 HTML Form 태그에서 기본적으로 지원하는 HTTP 메소드가 아니다.

RestAPI 기반 프로그램에서 DB에 저장되어 있는 내용을 삭제하는 목적으로 사용한다.

axios.delete(URL,[,config]);

• 데이터베이스 내부의 데이터를 삭제하는 DELETE 메소드는 일반적으로 body가 비어있는 형태이지만, query나 params가 많아서 헤더에 많은 정보를 담기 어려운 상황에 한해서만 두번째 인자에 data를 추가한다.

일반적인 delete

async function deleteData() {
  try {
    //응답 성공
    const response = await axios.delete('url주소');
    console.log(response);
  } catch (error) {
    //응답 실패
    console.error(error);
  }
}

헤더에 정보가 많이 포함된 경우

async function deleteData() {
  try {
    //응답 성공
    const response = await axios.delete('url주소',{
      //헤더에 포함된 정보들 
    	data:{
          post_id: 1,
      	  comment_id: 13,
      	  username: "foo"
        }
    });
    console.log(response);
  } catch (error) {
    //응답 실패
    console.error(error);
  }
}

PUT

PUT메소드는 HTML Form 태그에서 기본적으로 지원하는 HTTP 메소드가 아니다.

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

axios.put(url[, data[, config]])

• GET ➡️ POST 하는 과정을 거치기 때문에 POST 메소드와 비슷한 형식이다.

async function putData() {
  try {
    //응답 성공 
    const response = await axios.put('url주소',{
      	//항목에 새롭게 넣을 데이터
        id: id,
        password: password
    });
    console.log(response);
  } catch (error) {
    //응답 실패
    console.error(error);
  }
}