[Rest API] Axios로 비동기 통신하자

브라우저와 서버 간에 통신을 도와주는 Promise 기반의 HTTP 클라이언트 라이브러리입니다.

Axios란?

Axios는 서버와 브라우저를 위한 Promise 기반 HTTP 클라이언트입니다.

서버 사이드에서는 http 모듈을 사용하고, 클라이언트( 브라우저 )에서는 XMLHttpRequests를 사용합니다.

npm install axios

yarn add axios

Axios의 특징

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

*XSRF : 사이트 간 요청 위조하여 클라이언트에 대한 공격 ( 공격 대상은 Client )
*CSRF : 요청을 위조하여 서버에 대한 공격 ( 공격 대상은 Server )

참고

Axios를 사용 전 알아야 할 내용들이거나 정의입니다.

 

Promises
Axios를 사용하려면 PromiseAPI가 지원되어야 합니다.

만약 ES6의 Promise를 지원하지 않는 환경에서는 polyfill을 사용할 수 있습니다.

 

TypeScript
Axios는 TypeScript 정의가 포함되어 있습니다.

import axios from 'axios';
axios.get('/user?ID=juwon')

 

여러 개의 동시 Post요청 또한 가능합니다.

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

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

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
  });

 

Request Config

아래 목록들은 Request를 만드는 데 사용할 수 있는 config 옵션들입니다.

 

URL만 필수이고 method를 지정하지 않는다면 Get방식이 기본값입니다.

{
    // 요청에 사용될 서버 URL
    url : '/home',

    // 요청을 생성할때 사용되는 메소드 
    method : 'post', //get이 기본값

    // url이 절대값이 아닌 경우 baseURL은 url값의 앞에 붙습니다.
    baseURL : 'http://localhost:8080/',

    // 'transformRequest'는 요청 데이터를 서버로 전송하기 전에 변경할 수 있게 해줍니다.
    // 'put', 'post', 'patch', 'delete' 메소드에서만 적용됩니다.
    // 콜백 함수는 Buffer, ArrayBuffer, FormData 또는 Stream의 인스턴스 또는 문자열을 반환해야 합니다.
    // 헤더 객체 또한 수정 가능합니다.
    transformRequest : [ callbackFunction(){
        // 데이터를 변환하는 작업 수행
        return data
    }]

    // 'transformResponse'는 응답 데이터가 then/catch로 전달되기 전에 변경할 수 있게 해줍니다.
    transformResponse : [ callbackFunction(){
        // 데이터를 변환하려는 작업 수행
        return data
    }]

    // 'headers'는 사용자 지정 헤더입니다.
    headers : {'X-Requested-With' : 'XMLHttpRequest'}

    // ex)
    headers: { Authorization: 'token ' + ApiKey }
    headers: { 'Content-Type': 'application/json' }

    // dafault header 값 또한 초기화 할 수 있습니다.
    axios.defaults.headers = { 'Content-Type': 'application/json', Authorization: 'myspecialpassword' }

    // 매개 변수와 헤더로 요청을 받을 수 있습니다.
    var params = { paramName1: paramValue1, paramName2: paramValue2 }
    var headers = { headerName1: headerValue1, headerName2: headerValue2 }

    Axios.get(url, {params, headers} )

    // 파일 업로드시에 사용할 수 있는 헤더입니다.
    headers: { 'Content-Type': 'multipart/form-data' }

    const formData = new FormData();

    formData.append('file', fileData)

    Axios.post(url, { headers: { 'Content-Type': 'multipart/form-data' } }, formData)

    // Dto 클래스에서는 타입 MultipartFile file으로 받아야 합니다.

    // 여러개의 파일 또안 같은 헤더를 사용합니다.
    headers: { 'Content-Type': 'multipart/form-data' }

    // 여러개 파일업로드 예제
    const formData = new FormData();


    // FormData append 함수 특징
    // FormData 객체의 키(key)로 전달되는 값에 대괄호([])가 포함되는 경우 대괄호 안의 값을 Map의 키(key)로 인식합니다. 
    // 'files[' + (index % 3) + ']' 값은 files 라는 멤버 변수의 키 값으로 (index % 3) 값을 사용한다는 의미입니다.
    // 중첩되는 키가 존재하는 경우 맵의 Value 위치에는 리스트로 데이터가 담깁니다.

    for (let index = 0; index < this.files.length; index++) {
        formData.append('files[' + (index % 3) + ']', this.files[index]);
    }

    Axios.post(url, formData, { headers: { 'Content-Type': 'multipart/form-data' } })
    // Dto 클래스에서는 타입 Map<String, List<MultipartFile>> files으로 받아야 합니다.

    // params는 요청과 함께 전송되는 URL 파라미터입니다.
      // 반드시 일반 객체나 URLSearchParams 객체여야 합니다.
      // 참고: null이나 undefined는 URL에 렌더링되지 않습니다.
    params: {
      'member.memNick' : '윤주원'
    }

    // timeout은 요청이 시간 초과되기 전의 시간(밀리초)을 지정합니다.
    // 요청이 timeout보다 오래 걸리면 요청이 중단됩니다.
    timeout: 1000

    // adapter는 커스텀 핸들링 요청을 처리할 수 있어 테스트가 쉬워집니다.
    adapter: function (config) {
      // 커스텀 핸들링
      },

    // auth는 HTTP Basic 인증이 사용되며, 자격 증명을 제공합니다.
      // auth를 사용하면, `Authorization` 헤더가 설정되어 `headers`를 사용하여 설정한 기존의 `Authorization` 사용자 지정 헤더를             덮어씁니다.
      // 이 파라미터를 통해 HTTP Basic 인증만 구성합니다.
      // Bearer 토큰 등의 경우 `Authorization` 사용자 지정 헤더를 대신 사용합니다.
    auth: {
      username: '윤주원',
      password: '0723'
    }

    // responseType은 서버에서 받는 데이터의 타입입니다.
    // 옵션: 'arraybuffer', 'document', 'json', 'text', 'stream'
    // 브라우저 전용: 'blob'
    responseType: 'json', // 기본값

    // `responseEncoding`은 응답 디코딩에 사용할 인코딩입니다.
    // Node.js 전용
    responseEncoding: 'utf8', // 기본값

    // onUploadProgress는 업로드 진행 이벤트를 처리합니다.
    // 브라우저 전용
    onUploadProgress: function (progressEvent) {
      // 업로드 진행 이벤트 작업 수행
    },

    // onDownloadProgress는 다운로드로드 진행 이벤트를 처리합니다.
    // 브라우저 전용
    onDownloadProgress: function (progressEvent) {
      // 다운로드 진행 이벤트 작업 수행
    },

    // validateStatus는 지정된 HTTP 응답 상태 코드에 대한 Promise를 실행할지(then) 또는 거부할지(catch) 여부를 정의합니다. 
    // 만약 validateStatus가 true를 반환하면(또는 'null' 또는 'undefined'으로 설정) Promise를 실행합니다.
    // 그렇지 않으면, 해당 Promise는 거부됩니다.
    validateStatus: function (status) {
      return status >= 200 && status < 300; // 기본값
    },

    // proxy는 프록시 서버의 호스트이름, 포트, 프로토콜을 정의합니다.
    // 프록시 서버가 HTTPS를 사용한다면, 프로토콜을 https로 설정합니다.
    proxy: {
      protocol: 'https',
      host: '127.0.0.1',
      port: 8080,
      auth: {
        username: 'mikeymike',
        password: 'rapunz3l'
      }
      },

}

위 코드와 같이 axios 사용 시에 사용할 수 있는 Config입니다.

 

기본 axios 호출 예제입니다.

axios({
    method : 'post',
      url : '/',
    data : {
        firstName : 'Yun',
          secondName : 'Juwon'
    }
})

 

개발자 편의를 위해 제공되는 요청 명령어입니다.

  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.interceptors.request.use(config => {
    if (config.data instanceof FormData) {
      Object.assign(config.headers, config.data.getHeaders());
    }
    return config
  })

 

axios 실사용 예제입니다

main.js

import App from './App.vue'
import axios from 'axios'

axios.defaults.baseURL = "http://localhost:8099"

const app = createApp(App)
app.config.globalProperties.axios = axios

app.mount('#app')

//

getGitRepo.vue

import dotenv from 'dotenv'

dotenv.config()

const API_KEY = process.env.VUE_APP_API_KEY

 getFileList(r, flag) {
      const add = r
      this.tempAdd = add
      this.axios.get(`${add}`, {
        headers: {
          Authorization: `token ${API_KEY}`
        }
      })
          .then(res => {
            this.repoState = true
            for (let i of res.data) {
            
              // 403 error 방지
              if (i.name === 'package-lock.json') continue
              if (i.name === 'node_modules') continue
              if (i.name === '.DS_Store') continue
              if (i.name === 'favicon.ico') continue
              
              const array = {
                idx: i.sha,
                label: i.name,
                type: i.type,
                url: i.url,
                nodes: [],
                content: null,
              }
              
              if (i.type === 'file') {
                array.nodes = null
                array.content = i.content
              }
              
              this.data.push(array)
            }
            if (flag) this.insertRepoAdd()
          })
          .catch(() => {
                this.repoState = false
                const placeholder = document.querySelector('.repoInputText')
                placeholder.value = ''
                placeholder.placeholder = 'ex) Juwon-Yun/kanboo '
              }
          )
    },

( dotenv와 axios, vue.js의 라이브사이클 훅 mounted를 이용한 사용 예제입니다 )

 

이번 포스팅에서는 Axios를 알아보았습니다.

 

다음 시간에서는 Vue.js 공식 라이브러리인 Router의 기능에 대해 알아보겠습니다.