doi

doing something

3 minute read

Axios란?

node.js와 브라우저를 위한 Promise 기반의 HTTP 클라이언트이다.

  • 브라우저를 위해 XMLHttpRequests를 생성한다.
  • node.js를 위해 http 요청을 생성한다.
  • Promise API를 지원한다.
  • JSON 데이터를 자동으로 변환한다.
  • …

설치 방법

npm을 사용하는 경우: $ npm install axios로 설치한다.
yarn을 사용하는 경우: $ yarn add axios로 설치한다.

예제로 보는 사용 방법

① 아래는 지정된 ID를 가진 유저에 대해 GET 요청을 수행하는 코드이다.

const axios = require('axios')

axios.get('/user?ID=12345')
	.then(function (response) {
		// 요청이 성공했을 시의 코드
	})
	.catch(function (error) {
		// 에러가 발생했을 시 처리하는 코드
	})
	. finally(function () {
		// 성공, 실패 여부에 상관없이 항상 실행되는 코드.
		// 필요에 따라 작성한다.
	})

② 위의 코드에서 매개변수가 존재하는 경우, 다시 아래와 같이 작성할 수 있다.

const axios = require('axios')

axios.get('/user', { params: { ID: 12345 } })
	.then(function (response) {
		// 요청이 성공했을 시의 코드
	})
	.catch(function (error) {
		// 에러가 발생했을 시 처리하는 코드
	})
	. finally(function () {
		// 성공, 실패 여부에 상관없이 항상 실행되는 코드.
		// 필요에 따라 작성한다.
	})

③ 아래는 비동기적으로 두 개의 API 요청을 생성하고 처리하는 코드이다.

const axios = require('axios')

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];
	});
	.catch(error => {
	    console.error('요청 실패:', error);
	});

프로미스에 대한 간략한 설명

‘프로미스’란 비동기 작업의 결과를 나중에 받을 수 있도록 해 주는 자바스크립트 객체이다. API 요청과 같은 작업은 작업을 완료하는 데까지 시간이 걸리는데, 작업이 완료된 후 결과를 받아 처리하는 데 이용되는 것이 프로미스이다.
예시로 위 코드의 getUserAccount(), getUserPermissions() 함수의 경우, GET 요청이 실행된 다음 즉시 데이터를 반환하는 것이 아니라 프로미스를 반환한다. 즉 GET의 결과는 실제 응답 데이터가 아니라 프로미스 객체로, 이때 프로미스 객체는 ‘나중에 데이터를 넘겨 주겠다’는 약속과도 같다. 프로미스 객체는 성공 또는 실패라는 두 가지 상태로 넘어갈 수 있는데, 성공 시에는 then() 메소드로 응답 데이터를 처리하고, 실패 시에는 catch()로 에러를 처리하게 된다.

④ 꼭 위와 같은 형태가 아니더라도, axios에 config(여기서는 자바스크립트 설정 객체)를 전송하면 요청을 수행할 수 있다. 아래는 POST를 요청하는 코드이다.

axios({ 
	url: '/user/12345', // 필수 지정 
	method: 'post', 
	data: { firstName: 'Fred', lastName: 'Flintstone' } 
});

config 옵션

1) url: 필수로 지정해야 한다.
2) method: 지정된 값이 없다면 기본적으로 GET 요청을 수행한다.
3) data: 요청 바디로 전송될 데이터 값을 담는다. PUT, POST, PATCH, DELETE 네 가지 메소드에서만 적용 가능하다.
4) baseURL: url 값이 절대값이 아닐 경우, url 앞에 붙어 사용되는 값이다.
5) headers: 사용자 지정 헤더. API 요청 시에 필요한 헤더 정보(ex: 인증 토큰)를 담는다.
6) params: 매개변수.
7) timeout: 요청이 일정 시간을 초과했을 시 요청을 중단할 수 있도록 타임아웃을 설정할 수 있다.
8) withCredentials: 자격 증명을 사용해 사이트 간 액세스를 제어해야 하는지. false가 기본값이다.

환경 변수 파일(.env)를 이용한 설정 관리

.env 파일을 이용해 보안에 있어 민감한 정보들을 코드로부터 분리할 수 있다. 예시로, .env 파일에 API_URL=https://api.example.com를 저장해 두고, dotenv 패키지를 이용해 const apiUrl = process.env.API_URL;와 같이 정보를 가져다 쓸 수 있다.

Axios 인스턴스 생성하기

const instance = axios.create({ 
	baseURL: 'https://some-domain.com/api/', 
	timeout: 10000, // 10초 동안 응답이 없으면 요청을 중단
	headers: {
		'X-Custom-Header': 'foobar' 
	} 
});

요청에 대한 응답

Axios로 요청을 전송한 뒤, 반환 값으로 받아 온 프로미스가 성공하면 then() 메소드를 통해 아래와 같은 정보를 응답으로 받아 올 수 있다. (실패 시 에러 객체는 catch 또는 거부 콜백 함수로 처리한다.)

{
	data: {}, 
	status: 200, 
	statusText: 'OK', 
	headers: {}, 
	config: {}, 
	request: {} 
}

1) data: 서버가 제공하는 응답.
2) status: HTTP 상태 코드.
3) statusText: HTTP 상태 메시지.
4) headers: HTTP 헤더. .headers['content-type']와 같이 괄호로 접근할 수 있다.
5) config: 요청을 위해 Axios가 제공하는 구성
6) request: 이번 응답으로 새롭게 생성된 요청. 브라우저에서는 XMLHttpRequest가 된다.

거부 콜백 함수

then() 메소드는 콜백 함수 2개를 인수로 받을 수 있는데, 하나는 프로미스가 성공했을 때, 다른 하나는 거부했을 때를 위한 콜백 함수이다. 따라서 catch를 사용하지 않더라도 then()을 통해 에러를 처리할 수 있다. 하나를 생략할 경우 에러 핸들러가 없는 것이 될 뿐, 오류가 발생하지는 않는다.

You may also enjoy