Axios 사용법

현재 진행중인 공모전에서 Axios 라이브러리를 활용하여 서버 api와 통신 중, JSON파일만을 보낼때는 제대로 통신되었지만 이미지를 파일의 형태로 json파일과 같이 전송하는 부분에서 막히게 되어 앞전에 안드로이드 네트워크에 대한 공부한 내용을 바탕으로 AXIOS 라이브러리에 관해서도 한번 정리해보고자 한다.
 
 
 

Axios란 무엇일까?

 
공식문서에서 정의한 Axios는 '브라우저와 node.js에서 사용할 수 있는 promise 기반의 HTTP 클라이언트 라이브러리'로써 서버와의 HTTP통신을 쉽게 할 수 있게 도와주는 Javascript기반의 비동기형 라이브러리이다.
 
 
 
 

Axios의 특징들

 
 
Promise 기반 (ES6) : Axios는 promise기반의 API를 사용하기에 비동기형 HTTP요청을 쉽고 효율적으로 처리하며 .then(), .catch(), 그리고 async/await 구문 등을 사용한다.
 
node.js와 웹 browser에서 모두 사용가능 : Axios는 브라우저와 Node.js 양쪽 환경에서 모두 동일한 방식으로 구현할 수 있게 지원해준다,
 
request/response 인터셉터 기능: 서버로 request를 보내기 전이나 서버로 부터 response를 받은 후에 데이터를 가로챌 수 있는 인터셉터 기능을 제공해주어 데이터를 전송하기 전에 요청을 수정하거나, 응답을 파싱하기 전에 데이터를 조정할 수 있게 해준다.
 
요청 취소 기능: 진행 중인 요청을 취소할 수 있는 기능을 제공해준다.
 
자동으로 JSON 데이터로 변환해줌 : 응답 데이터를 자동으로 JSON으로 변환시주어 API 통신을 쉽고 간단하게 해준다.
 
웹환경 보안기능: CSRF 보호와 같은 웹 보안 기능을 지원해준다.
 
다양한 HTTP 요청 메소드를 지원: GET, POST, PUT, DELETE, HEAD 등과 같은 다양한 HTTP 요청 메소드를 지원해준다.
 
타임아웃 기능: 요청이 너무 오래 걸릴 경우 자동으로 요청을 중단할 수 있도록 타임아웃을 통해 제한시간을 설정할 수 있다.
 
HTTP 상태 코드 기반의 에러 처리:  HTTP 상태 코드에 기반하여 에러 코드를 보내주기에 익숙한 에러코드들을 활용해 에러를 처리할 수 있다.
 
 
 
 

Axios 기본 문법

Axios의 기본 문법들을 아래 링크에 나와있는 공식문서를 토대로 정리해보도록 하겠다.
 
 
https://axios-http.com/kr/docs/intro

시작하기 | Axios Docs

 
 
 
 

요청 메소드 명령어 종류

 
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
 
 
 
 

Axios 요청 문법 기본 구조 

 
아래는 공식문서에 나와있는 Axios 통신에 필요한 최소한의 parameter들이며 Method 방식은 POST로 예를 들겠다.
 
( 요청메서드가 달라진다고해서 구조가 바뀌는게 아니라  Method 형태만 달라지기 때문에 다른 메서드들도 기본적인 구조나 사용법이 같음)
 

// POST 요청 전송 기몬 구조
axios({
  method: 'post',			// 요청방식
  url: '/user/12345',			// 통신한 서버 주소
  data: {				// 본문(body)에 담아 보낼 data
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

 
 
 
Method : HTTP 요청 Method의 형식이 담기는 parameter로 POST, GET과 같은 요청방식을 명시해줘야 함
 
URL : URL에는 보통 요청이 전송될 서버의 주소가 담기며 URL을 제대로 명시해주는 것이 중요함 
 
Data:  Axios는 이 객체를 JSON 문자열로 자동 변환하여 본문(Body)에 담아 서버에보내고, 서버에선 이 JSON 객체를 받아 파싱하여 요청된 Method로 해당 데이터를 처리함

 

 
 

Axios에서 활용되는 유용한 Parameter 추가정리 (자주 쓰이는 것 위주로 정리함)

 
 
headers: Content-Type을 명시하거나, 인증을 위한 토큰을 추가하는 등 서버에 요청(request)을 보낼 때 필요한 HTTP 헤더들을 설정할 수 있다.
 
params: URL Query 문자열에 추가될 parameter를 객체 형태로 지정할 수 있다.
 
time-out: 밀리초 단위의 time-out을 설정하여 일정 시간이 지나면 요청이 취소되게할 수 있다.
 
responseType: 응답 데이터의 타입을 json, blob, document등으로 지정할 수 있다.
 
auth: HTTP 기본 인증에 사용되는 username과 password를 지정할 수 있다.
 
cancelToken: 요청을 취소할 수 있게 해주는 토큰을 추가할 수 있게 해준다.
 
validateStatus: HTTP 응답 상태 코드가 요청을 성공적으로 처리했는지 확인할 수 있게 해준다.
(2xx코드 -> '안드로이드 네트워크에 대하여' 글 http 상태코드 내용 참고)
 
 
 
 

Axios 요청 문법 parameter 추가 되었을 때 구조

 

axios({
    method: "get", 					// 통신 방식
    url: "https://www.naver.com/",			// 서버 url
    data: { 						// 서버에 보낼 데이터
      username: 'exampleUser',
      password: 'examplePass'
    },
    headers: { 						// 토큰 및 데이터 타입등 요청 헤더 설정
      'Content-Type': 'application/json',
      'Authorization': 'Bearer your_access_token'
    },
    params: { 						// key와 value로 이루어진 쿼리문 설정
      key: 'value'
    },
    timeout: 5000,  					// 요청 타임아웃
    responseType: 'json', 				// 응답받는 객체의 타입을 지정
    cancelToken: token,					// 요청 취소 토큰
    
    validateStatus: function (status) {			// HTTP응답 상태 코드에 따라 요청이 성공했는지 실패했는지 반환 
      return status >= 200 && status < 300; 
    },
    
    auth: {						// 서버에서 인증절차를 걸칠 username password를 정의
        username: 'mikeymike',
        password: 'rapunz3l'
    }, 
})

 
 
 
 
 

Axios 응답 문법 기본 구조 

 
Axios를 사용하여 HTTP 요청을 보낸 후 서버로부터 받는 응답은 일반적으로 response 객체 형태로 반환되며, 주로 .then구문을 통해 response객체를 응답받는다.
 

try{ 
   axios({
      // 요청 문법...
    })
      .then(function(response) {
      console.log(response.data)
      console.log(response.status)
      console.log(response.statusText)
      console.log(response.headers)
      console.log(response.config)
    })
}

 
 
Axios 응답 객체의 주요 속성:
 
response.data: responseType에 따라 서버가 반환해준 데이터

response.status:  서버 응답의 HTTP 상태 코드

response.statusText: 서버 응답으로 부터의 HTTP 상태 메시지

response.headers: 응답에 포함된 HTTP 헤더들의 객체로 응답과 함께 보낸 헤더 정보를 확인가

response.config: 요청을 보낼 때 사용된 Axios 요청 설정으로, 요청을 보낼 때 설정한 URL, 헤더, 파라미터 등이 포함된다.

response.request: 요청에 사용된 XMLHttpRequest 객체(브라우저 환경) 또는 HTTP 클라이언트 객체
 
 
위의 코드들에서 Javascript의 문법인 async와 await을 Axios를 사용할 때 주로 쓰이는 예외처리방법인 try-catch문과 같이 활용하면 아래처럼 비동기 작업을 좀 더 쉽고, 안전하며, 효율적으로 관리할 수 있게 할 수 있다.
 

async function postDate() {
  try {
    const response = await axios({
      method: "get",
      url: "https://www.naver.com/",
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer your_access_token'
      },
      params: {
        key: 'value'
      },
      timeout: 5000,
      responseType: 'json',
      cancelToken: token,
      validateStatus: function (status) {
        return status >= 200 && status < 300;
      },
      auth: {
        username: 'mikeymike',
        password: 'rapunz3l'
      }
    });

    console.log('Response:', response.data);
  } catch (error) {
    if (axios.isCancel(error)) {
      console.log('Request was canceled', error.message);
    } else {
      console.error('Error during the request:', error);
    }
  }
}