간단한 토이프로젝트를 진행하면서 사용해보았던,
Axios
에 대해 정리하고자 쓴 글입니다.
Axios
란 브라우저, Node.js를 위한 HTTP 비동기 통신 라이브러리이다.
Promise 기반이며 async, await 사용이 가능하다.
JS 비동기통신 내장라이브러리인 fetch
와 다르게, 설치를 통해 사용이 가능하다.
구버전의 브라우저와 호환이 되며 데이터를 JSON 형태로 자동 변환할 수 있다.
npm install axios
or yarn add axios
를 통해 설치가 가능하다. 브라우저의 환경에서 사용할 경우 공식문서에서 제공하는 script src
를 통해 설치할 수 있다.일반적인 요청 방식은 다음과 같다.
import axios from 'axios' // axios({ method: 'get', url:'/user', // 이 외 나머지 config 항목들은 optional이다. }).then(res => console.(res))
url
외에는 모두 optional하므로 공식문서를 참고하여 추가로 config
영역에 지정해주면 된다. (method
의 경우 default
값이 get
이므로 optional이라고 보는 듯하다. 또한 자주 사용하게 될 쿼리 관련 params
, post
시 사용할 data
, 토큰 관련 headers
에 대해 좀 더 알고 있으면 좋을 듯하다.)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
내부에 모든 인자를 지정해주는 것이 아닌 요청 메서드와 동일한 name
으로 제공되는 메소드를 사용할 경우 url
, method
, data
를 따로 지정할 필요가 없어진다.const getData = axios.create({ baseURL: 'url', headers: {Authorization: 'token'}, ... }) // getData1.get('url2',{ // 추가 path url params: { // 쿼리 작성 a: 10, b: 20, }, }); // 실제로 요청하는 API 주소: `url/url2?a=10&b=20` // getData2.get('url3',{ // 추가 path url params: { // 쿼리 작성 c: 30, d: 40, }, }) // 실제로 요청하는 API 주소: 'url/url3?c=30&d=40'
create()
메서드를 통해 인스턴스를 생성하게 되면, 사용자가 정의한 인스턴스를 기준으로 추가 path
및 query
를 지정할 수 있다.응답 스키마, 즉 통신에 대한 응답 데이터는 아래와 같은 형태로 오게 된다.
{ config: {}, data: {}, headers: {}, request: {} status: 200, statusText: 'OK', }
config
: request에 대해 설정된 config 내부 구조이다.data
: 서버에서 받아오는 데이터이다.headers
: 서버에서 받아오는 데이터이다.status
: 통신 상태를 나타내는 status code
이다.statusText
: HTTP 상태 메시지이다.headers
: 서버가 응답한 헤더의 정보import axios from "axios"; // class Youtube { constructor(key) { this.youtube = axios.create({ baseURL: "https://www.googleapis.com/youtube/v3", params: { key: key }, }); } // async mostPopular() { const response = await this.youtube.get("videos", { params: { part: "snippet", chart: "mostPopular", maxResults: 25, }, }); return response.data.items; } } export default Youtube;
유튜브 API를 사용하여 동영상 정보를 가져오는, 간단한 토이프로젝트에 적용했다.
axios.create
를 통해 기본 인스턴스를 지정한 후, path
및 query parameter
를 통해 원하는 데이터를 얻어올 수 있었다.
또한 로직을 컴포넌트 내부에 직접 선언하는 것이 아닌, 외부로 빼내어 모듈화를 시켜주며 재사용성을 좀더 높일 수 있었다.