Axios

Axios

• Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.
• 출처 : https://이듬.run/axios/

1. 기능

• 브라우저 환경 : XMLHttpRequests 요청 생성
• Node.js 환경 : HTTP 요청 생성
• Promise API 지원
• 요청/응답 차단(Intercept)
• 요청/응답 데이터 변환
• 취소 요청
• JSON 데이터 자동 변환
• 사이트 간 요청 위조(XSRF) 보호를 위한 클라이언트 사이드 지원

2. 설치

$ npm install axios

3. 사용법

01. GET 요청

import axios from 'axios';

// ID로 사용자 요청
axios.get('/user?ID=12345')
	// 응답 (성공)
	.then((res) => {console.log(res);})
	// 응답 (실패)
	.catch((err) => {console.log(err);})
	// 응답 (항상 실행)
	.then(() => {...});

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

02. async/await

• async/await를 사용할 경우 함수 앞에 async 키워드를 사용하고 내부에 await 키워드를 사용해 비동기 통신 요청을 처리한다.
• async/await는 오류 디버깅을 위해 try...catch 구문을 사용한다.

const getUser = async () => {
	try{
		const res = await axios.get('user?ID=12345');
	} catch (err) {
		console.error(err);
	}
}

4. API

• configuration 설정을 axios() 에 전달하여 요청할 수 있다.
• axios(config)

01. POST 요청

axios({
	method: 'post',
	url: '/user/12345',
	data: {
		firstName: 'first',
		lastName: 'last'
	}
});

• axios()에 url을 전달해 요청할 수 있다. 선택적으로 config 객체를 2번째 인자로 추가 전달할 수 있다.

axios(url[, config]);

02. HTTP 메서드 별칭

• 편의를 위해 지원되는 모든 요청 메소드에 별칭이 제공됩니다.

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])

• 별칭 메소드 사용시 설정(config)에서 url, nethod 및 data 속성을 지정할 필요가 없다.

axios.put('/user/12345', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})

03. 동시성

• 생략

04. 인스턴스 생성

• .create() 메서드를 사용해서 사용자 정의 구성을 사용하는 axios 인스턴스를 생성할 수 있다.

axios.create([config]);

const instance = axios.create({
	baseURL: 'https://some-domain.com/api/',
	headers: { 'X-Custom-Header': 'foobar' },
	timeout: 1000,
});

05. 인스턴스 메서드

• 설정된 구성(config)이 인스턴스 구성과 병합됩니다.

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

06. 구성(config) 옵션

• 사용 가능한 구성(config) 설정 옵션
• url 속성은 필수, 나머지 속성은 옵션
• method가 지정되지 않으면 default 요청은 GET
• 너무 길어서 URL : https://이듬.run/axios/guide/api.html#구성-옵션

5. 응답 스키마 (Schema)

• 추가 예정

6. Config 기본 설정

• 모든 요청에 적용될 구성 기본(Config Defaults) 값을 지정할 수 있다.

01. 글로벌 axios 기본(defaults) 설정

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

02. 사용자 정의 인스턴스 기본 설정

// axios 인스턴스를 만들 때 구성 기본 값 설정
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 인스턴스가 생성 된 후 기본값 변경
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

03. 구성 우선 순위 규칙

• 구성(Config)은 우선 순위 규칙에 따라서 병합된다.
• 순서는 lib/defaults.js에 있는 라이브러리 기본 값, 인스턴스의 defaults 속성, 그리고 요청에서 설정한 인자 순이다.
• 후자는 전자보다 우선한다.

// 라이브러리에서 제공하는 config 기본 값을 사용하여 인스턴스를 만들면
// 이 시점에서 라이브러리의 기본 값인 timeout 구성은 '0' 입니다.
const instance = axios.create();

// 라이브러리의 timeout 기본 값을 2.5초로 재 정의하여
// 인스턴스의 모든 요청은 2.5초 간만 대기 후 타임아웃 처리합니다.
instance.defaults.timeout = 2500;

// 최종적으로 인스턴스에 설정된 timeout 구성 값 5000으로 덮어씁니다.
instance.get('/longRequest', {
  timeout: 5000
});

// 우선 순위
// 인스턴스 호출 메서드 옵션 > 인스턴스.defaults 설정 옵션 > 인스턴스.create()에 설정된 옵션