Axios

 

Axios

 

Axios란?

• Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.
• 백엔드 / 프론트엔드의 통신을 쉽게하기 위해 Ajax로 서버에 데이터를 요청한다.

 

라이브러리 설치

npm i --save axios

 

Axios 사용하기

데이터 요청

// 방법 1
axios.get('URL', { 전송할 데이터 })

// 방법 2
axios({
	method: '메소드',
	url: 'URL',
	params: {
		'get ... 등으로 데이터 전송 시 보낼 데이터'
	},
	data: {
		'post ... 등으로 데이터 전송 시 보낼 데이터'
	}
})

• 데이터를 보낼때는 params 또는 data를 사용하는데, params는 대표적으로 get 메소드, data는 post, patch 등 body에 보낼 데이터가 있는 메소드로 선언하여 전송한다.
  • HTTP 요청 메소드
    
    1. GET: 서버로 부터 데이터를 취득
    2. POST: 서버에 데이터를 추가, 작성 등
    3. PUT: 서버의 데이터를 갱신, 작성 등
    4. DELETE: 서버의 데이터를 삭제
    5. HEAD: 서버 리소스의 헤더(메타 데이터의 취득)
    6. OPTIONS: 리소스가 지원하고 있는 메소드의 취득
    7. PATCH: 리소스의 일부분을 수정
    8. CONNECT: 프록시 동작의 터널 접속을 변경

💡 body 란? HTTP 구조 (설명 링크)

데이터 응답

{
	data: {},
	status: 200,
	statusText: 'OK',
	headers: {},
	config: {}
}

• 데이터 전송 후 서버로부터 받은 response의 형태이다.
  1. data : 서버에서 send로 보낸 데이터의 값
  2. status : res.status 로 보내는 상태 코드
  3. statusText : HTTP 상태 메시지
  4. headers : 서버에서 보낸 헤더 값
  5. config : axios 요청 시 전달했던 설정 값

 

자주 쓰이는 HTTP Methods

GET

데이터를 서버로 부터 데이터 생성/수정/삭제 없이 받아올 때 사용한다.

• params를 URL에 넣는 방법

axios.get('/user?ID=12345')

• params를 추가하는 방법

axios.get('/user', {
    params: {
      ID: 12345
    }
  })

 

POST

데이터를 생성/수정/삭제 할때 주로 사용하여 대부분의 경우 request body가 포함된다.

• 단일 API 호출

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

• 멀티 API 호출

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

 

---

GET, POST

GET과 POST 방식의 Request는 서버로 본인이 가지고 있는 data를 전달하기 위해 사용한다.

data를 전달한다는 본질적인 기능은 같다고 볼 수 있다.

 

그러나 세부적으로 보안과 전달형식, 전달할 수 있는 data의 양에 따라 차이점이 발생한다.

 

❗ GET

• HTTP 패킷의 헤더에 http://localhost:3000/login?id=admin&pw=1234와 같이 URL 뒤에 쿼리스트링 (Key와 Value) 형식으로 서버에 데이터를 요청한다. ⇒ URL에 정보가 노출이 되기 때문에 POST 방식보다 상대적으로 보안에 취약하다.
• 캐싱이 가능하다.
• 한번의 데이터 요청시 전송 데이터의 양은 255자(주소값 + 파라미터)로 제한된다.
• POST 방식보다 상대적으로 전송 속도가 빠르다. 

 

❗ POST

• http://localhost:3000/login 형식으로 HTTP 패킷의 바디에 데이터를 담아서 전송한다. (웹 사용자는 바디의 내용을 볼 수 없다.) ⇒ URL 상에 정보가 나타나지 않아 GET 방식보다 상대적으로 보안성이 높다.
• URL에 데이터가 노출되지 않으므로 캐싱이 불가능하다
• 요청 시 데이터양의 제한이 없다.
• 클라이언트에서 인코딩, 서버에서 디코딩하며 요청받는 시간제한이 있다.

 

---

 

HTTP Status Code

모든 HTTP 응답 코드는 5개의 클래스(분류)로 구분되며 상태 코드의 첫 번째 숫자는 응답의 클래스를 정의한다.

• 1xx (정보): 요청을 받았으며 프로세스를 계속한다.
• 2xx (성공): 요청을 성공적으로 받았으며 인식했고 수용하였다.
• 3xx (리다이렉션): 요청 완료를 위해 추가 작업 조치가 필요하다.
• 4xx (클라이언트 오류): 요청의 문법이 잘못되었거나 요청을 처리할 수 없다.
• 5xx (서버 오류): 서버가 명백히 유효한 요청에 대해 충족을 실패했다.