axios

axios란?

axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 백엔드와 프론트엔드 사이의 통신을 쉽게하기 위해 오늘날 Ajax와 같이 많이 사용되고 있는 라이브러리이다.

axios 특징

• 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 HTTP API 사용
• Promise(ES6) API 사용
• 요청과 응답 데이터의 변형
• HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변형

axios vs fetch api

요약하자면, 별도의 기능들을 생각한다면(error handling, request aborting, response timeout) axios, 애플리케이션의 무거움을 줄이고 별도의 기능이 필요치 않으면 fetch API를 선택하면 된다.

또한 업데이트가 잦은 리액트 네이티브를 사용할 경우, axios는 업데이트를 쫒아오지 못하는 경우가 많아, fetch API를 주로 사용한다고 한다.

fetch API와 axios 모두 ajax를 구현한다. ajax는 서버와의 비동기 통신을 하는 방식으로 XMLHttpRequest 객체를 사용한다. fetch API와 axios 모두 내부적으로 ajax API를 사용하고 있다.

axios 사용

    npm install --save-dev axios

axios를 사용하려면 fetch API와 달리 라이브러리 설치가 필수적이다.

axios.get(url[, config])            // GET
axios.post(url[, data[, config]])   // POST
axios.put(url[, data[, config]])    // PUT
axios.patch(url[, data[, config]])  // PATCH
axios.delete(url[, config])         // DELETE

axios.request(config)
axios.head(url[, config])
axios.options(url[, config])

사용가능한 HTTP 메소드와 양식은 위와 같다.

• url : 요청에 사용될 서버 URL.
• method : HTTP 메소드 이름.
• config : 기타 설정.

사용예시는 다음과 같다.

import axios from 'axios';

const config = {
    headers: {
        'Content-Type' : 'application/json'
    }
}

    const body = JSON.stringify({fullname, username, email, password})


    const response = await axios.post('http://localhost:4000/app/signup', body, config)

해당 URL에 HTTP 메소드 중 하나인 POST 요청을 하는 코드이며, config 객체 형식으로 header의 Content-Type 속성에 json파일임을 명시하였다.

axios의 기능은 이외에도 많고, 해당 기능들을 사용해보고 이해하게 된다면 본 포스트에 추가하겠다.

Reference

https://velog.io/@zofqofhtltm8015/Axios-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%84%9C%EB%B2%84-%ED%86%B5%EC%8B%A0-%ED%95%B4%EB%B3%B4%EA%B8%B0
https://velog.io/@shin6403/React-axios%EB%9E%80-feat.-Fetch-API