1. Axios란?
브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리
- 클라이언트(브라우저)에서는 XMLHttpRequests를 생성
- 서버 사이드에서는 네이티브 node.js의
http모듈 사용 - Promise API를 지원
- 요청 및 응답 인터셉트
- 요청 및 응답 데이터 변환
- 요청 취소
- JSON 데이터 자동 변환
- XSRF를 막기 위한 클라이언트 사이드 지원
설치
$ npm install axios
$ yarn add axios
2. POST 요청
Axios로 POST 요청을 시작하는 방법
POST 요청 생성
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});3. Axios API
구성(configuration) 설정을 axios()에 전달하여 요청할 수 있다.
// 원격 이미지 GET 요청
axios({
method:'get',
url:'http://bit.ly/2mTM3nY',
responseType:'stream'
})
.then(function (response) {
response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});
axios()에 url을 전달해 요청할 수 있다. 선택적으로 config 객체를 두번째 인자로 추가 전달할 수 있다.
// GET 요청 전송 (기본 메서드)
axios('/user/12345');4. 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별칭을 사용하면 설정에서 url, method 및 data 속성을 지정할 필요가 없다.
axios()사용시
// axios() 사용 시
axios({
url: '/user/12345',
method: 'put',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})axios.put() 별칭 메소드 사용시
// axios.put() 별칭 메서드 사용 시
axios.put('/user/12345', {
firstName: 'Fred',
lastName: 'Flintstone'
})5. Axios 인스턴스
사용자 지정 config로 새로운 Axios 인스턴스를 만들 수 있다.
axios.create([config])
const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});사용 예제
const API = axios.create({
baseURL: 'https://www.url.shop',
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer ' + localStorage.getItem('access_token'),
},
});
6. 응답 스키마
요청에 대한 응답은 아래의 정보를 가지고 있다.
{
// `data`는 서버가 제공하는 응답입니다.
data: {},
// `status`는 HTTP 상태 코드입니다.
status: 200,
// `statusText`는 HTTP 상태 메시지입니다.
statusText: 'OK',
// `headers`는 HTTP 헤더입니다.
// 모든 헤더 이름은 소문자이며, 괄호 표기법을 사용하여 접근할 수 있습니다.
// 예시: `response.headers['content-type']`
headers: {},
// `config`는 요청을 위해 `Axios`가 제공하는 구성입니다.
config: {},
// `request`는 이번 응답으로 생성된 요청입니다.
// 이것은 node.js에서 마지막 ClientRequest 인스턴스 입니다.
// 브라우저에서는 XMLHttpRequest입니다.
request: {}
}then을 사용하면, 아래와 같은 응답을 받는다.
axios.get('/user/12345')
.then(function (response) {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
});catch를 사용하거나, 거부 콜백 함수를 then의 두번째 인자로 넘길 시, 에러 핸들링에서 설명된 error 객체를 사용할 수 있다.
7. Config 기본값
모든 요청에 적용될 config 기본 값을 지정할 수 있다.
전역 Axios 기본값
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';커스텀 인스턴스 기본값
// 인스턴스를 생성할때 config 기본값 설정하기
const instance = axios.create({
baseURL: 'https://api.example.com'
});
// 인스턴스를 만든 후 기본값 변경하기
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;Config 우선 순위
Config는 우선 순위에 따라 병합된다. lib/defaults.js 라이브러리에서의 기본값, 인스턴스의 defaults 속성, 요청의 config 인자를 순서대로 찾습니다. 후자가 전자보다 우선순위가 높습니다.
8. 구성 옵션 (config)
사용 가능한 구성(config) 설정 옵션. url속성만 필수이고, 나머지 속성은 옵션이다. method가 지정되지 않으면 요청은 GET으로 기본 설정된다.
{
// `url`은 요청에 사용될 서버 URL입니다.
url: '/user',
// `method`는 요청을 할 때 사용될 메소드 이름입니다.
method: 'get', // 기본
// `url` 속성 값이 절대 URL이 아니라면, `url` 앞에 `baseURL`이 붙습니다.
// axios 인스턴스가 상대 URL을 해당 인스턴스의 메소드에 전달하도록
// `baseURL`을 설정하는 것이 편리 할 수 있습니다.
baseURL: 'https://some-domain.com/api/',
// `transformRequest`는 서버에 보내기 전에 요청 데이터를 변경할 수 있습니다.
// 요청 메소드 'PUT', 'POST' 및 'PATCH' 에만 적용 가능합니다.
// 배열의 마지막 함수는 버퍼(buffer)의 문자열이나 인스턴스를 반환해야 합니다.
// ArrayBuffer, FormData 또는 Stream 헤더 객체를 수정할 수 있습니다.
transformRequest: [function (data, headers) {
// 데이터 변환 수행 후, 반환
// ...
return data;
}],
// `transformResponse`는 응답할 데이터에 대한 변경을 전달해
// then/catch에 전달하도록 허용합니다.
transformResponse: [function (data) {
// 데이터 변환 수행 후, 반환
// ...
return data;
}],
// `headers`는 서버에 전송 될 사용자 정의 헤더 입니다.
headers: { 'X-Requested-With': 'XMLHttpRequest' },
// `params`는 요청과 함께 전송 될 URL 매개 변수입니다.
// 일반 객체 이거나 URLSearchParams 객체여야 합니다.
params: {
ID: 12345
},
// `paramsSerializer`는`params`를 직렬화(serializing) 하는 옵션 함수입니다.
// (예: https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function (params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
},
// `data`는 요청 본문(request body)으로 전송할 데이터입니다.
// 'PUT', 'POST' 및 'PATCH' 요청 메소드에만 적용 가능합니다.
// 'transformRequest`가 설정되지 않은 경우 다음 유형 중 하나여야 합니다.
// - [ string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams ]
// - 브라우저 전용: FormData, File, Blob
// - Node.js 전용: Stream, Buffer
data: {
firstName: 'Fred'
},
// `timeout`은 요청이 타임 아웃되는 밀리 초(ms)를 설정합니다.
// 요청이`timeout` 설정 시간보다 지연될 경우, 요청은 중단됩니다.
timeout: 1000, // 기본 값: `0` (타임아웃 없음)
// `withCredentials`는 자격 증명(credentials)을 사용하여
// 크로스 사이트 접근 제어(cross-site Access-Control) 요청이 필요한 경우 설정합니다.
withCredentials: false, // 기본 값
// `adapter`는 테스트를 보다 쉽게 해주는 커스텀 핸들링 요청을 허용합니다.
// 유효한 응답(Promise)을 반환해야 합니다. (lib/adapters/README.md 참고).
adapter: function (config) {
// ...
},
// `auth`는 HTTP 기본 인증(auth)이 사용되며, 자격 증명(credentials)을 제공함을 나타냅니다.
// 기존의 `Authorization` 커스텀 헤더를 덮어쓰는 `Authorization` 헤더(header)를 설정합니다.
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
// `responseType`은 서버에서 응답할 데이터 타입을 설정합니다.
// [ 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream' ]
responseType: 'json', // 기본 값
// `responseEncoding`은 응답 디코딩에 사용할 인코딩을 나타냅니다.
// [주의!] 클라이언트 사이드 요청 또는 `responseType`이 'stream'인 경우는 무시합니다.
responseEncoding: 'utf8', // 기본 값
// `xsrfCookieName`은 xsrf 토큰(token)에 대한 값으로 사용할 쿠키 이름입니다.
xsrfCookieName: 'XSRF-TOKEN', // 기본 값
// `xsrfHeaderName`은 xsrf 토큰 값을 운반하는 HTTP 헤더 이름입니다.
xsrfHeaderName: 'X-XSRF-TOKEN', // 기본 값
// `onUploadProgress`는 업로드 프로그래스 이벤트를 처리합니다.
onUploadProgress: function (progressEvent) {
// 네이티브 프로그래스 이벤트(Native Progress Event) 처리 코드
// ...
},
// `onDownloadProgress`는 다운로드 프로그래스 이벤트를 처리합니다.
onDownloadProgress: function (progressEvent) {
// 네이티브 프로그래스 이벤트(Native Progress Event) 처리 코드
// ...
},
// `maxContentLength`는 HTTP 응답 콘텐츠의 최대 크기를 바이트(Bytes) 단위로 설정합니다.
maxContentLength: 2000,
// `validateStatus`는 주어진 HTTP 응답 상태 코드에 대한 약속을 해결할지 거절 할지를 정의합니다.
// `validateStatus`가`true`를 반환하면 (또는`null`,`undefined`) promise를 resolve 합니다.
// 그렇지 않으면 promise가 reject 됩니다.
validateStatus: function (status) {
return status >= 200 && status < 300; // 기본 값
},
// `maxRedirects`는 Node.js에서 리디렉션 가능한 최대 갯수를 정의합니다.
// 0으로 설정하면 리디렉션이 수행되지 않습니다.
maxRedirects: 5, // 기본 값
// `socketPath`는 Node.js에서 사용될 UNIX 소켓을 정의합니다.
// 예: '/var/run/docker.sock'을 사용하여 docker 데몬에 요청을 보냅니다.
// `socketPath` 또는`proxy`만이 지정 될 수 있습니다.
// 둘 다 지정되면`socketPath`가 사용됩니다.
socketPath: null, // 기본 값
// `httpAgent`와`httpsAgent`는 각각 Node.js에서 http와 https 요청을 수행 할 때
// 사용할 커스텀 에이전트를 정의합니다. 이것은 기본적으로 활성화되지 않은 `keepAlive`와 같은
// 옵션을 추가 할 수 있게 합니다.
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
// 'proxy'는 프록시 서버의 호스트 이름과 포트를 정의합니다.
// 기존의 `http_proxy` 및 `https_proxy` 환경 변수를 사용하여 프록시를 정의 할 수도 있습니다.
// 프록시 설정에 환경 변수를 사용하고 있다면 `no_proxy` 환경 변수를 쉼표로 구분 된 도메인 목록으로
// 정의하여 프록시 할 필요가 없습니다.
// 환경 변수를 무시하고 프록시를 사용하지 않으려면 `false`를 설정합니다.
// `auth`는 HTTP 기본 인증(Basic Auth)를 사용하여 프록시에 연결하고 자격 증명을 제공해야 함을 나타냅니다.
// 기존의 `Proxy-Authorization` 커스텀 헤더를 덮어쓰는 `Proxy-Authorization` 헤더(header)를 설정합니다.
proxy: {
host: '127.0.0.1',
port: 9000,
auth: {
username: 'mikeymike',
password: 'rapunz3l'
}
},
// `cancelToken`은 요청을 취소하는 데 사용할 수 있는 취소 토큰을 지정합니다.
// (자세한 내용은 해제(Cancellation) 섹션 참조).
cancelToken: new CancelToken(function (cancel) {
// ...
})
}url
상대경로
baseURL
url 속성 값이 절대 URL이 아니라면, url 앞에 baseURL 이 붙는다. axios 인스턴스가 상대 URL을 해당 인스턴스의 메소드에 전달하도록 baseURL을 설정하는 것이 편리할 수 있다.
서버의 기본 URL - url을 상대경로로 쓸 때 url 앞에 붙는 주소.
headers
서버에 전송 될 사용자 정의 헤더 (매번 전달해야하는 객체(ex.사용자 토큰)을 넣어주면 자동으로 삽입됨.
params
요청과 함께 전송 될 URL 매개 변수. 일반 객체이거나 URLSearchParams 객체여야 한다.
withCredentials
자격 증명(credentials)을 사용하여 크로스 사이트 접근 제어(cross-site Access-Control) 요청이 필요한 경우 설정한다.
-
authauth는 HTTP 기본 인증(auth)이 사용되며, 자격 증명(credentials)을 제공함을 나타낸다. 기존의Authorization커스텀 헤더를 덮어쓰는Authorization헤더(header)를 설정한다. -
Authorizaiton
인증 토큰(JWT, Bearer, …etc)을 서버로 보낼 때 사용하는 헤더
Authorization: Bearear xxxxx
보통 Basic이나 Bearer 같은 토큰의 종류를 먼저 알리고 그 다음 실제 토큰 문자를 적어 보낸다.
headers Authorization
무분별한 데이터 접근을 막기 위해 headers에 토큰을 추가하여 token 값이 있어야만 데이터에 접근 가능하게 만들 수 있다.
headers: {
Authorization: `Token ${token}`
}9. 인터셉터
then 또는 catch로 처리되기 전에 요청과 응답을 가로챌 수 있다.
// 요청 인터셉터 추가하기
axios.interceptors.request.use(function (config) {
// 요청이 전달되기 전에 작업 수행
return config;
}, function (error) {
// 요청 오류가 있는 작업 수행
return Promise.reject(error);
});
// 응답 인터셉터 추가하기
axios.interceptors.response.use(function (response) {
// 2xx 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
// 응답 데이터가 있는 작업 수행
return response;
}, function (error) {
// 2xx 외의 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
// 응답 오류가 있는 작업 수행
return Promise.reject(error);
});
나중에 필요할 때 인터셉터를 제거할 수 있고, 커스텀 인스턴스에서도 인터셉터를 추가할 수 있다.
10. 에러 핸들링
axios.get('/user/12345')
.catch(function (error) {
if (error.response) {
// 요청이 전송되었고, 서버는 2xx 외의 상태 코드로 응답했습니다.
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// 요청이 전송되었지만, 응답이 수신되지 않았습니다.
// 'error.request'는 브라우저에서 XMLHtpRequest 인스턴스이고,
// node.js에서는 http.ClientRequest 인스턴스입니다.
console.log(error.request);
} else {
// 오류가 발생한 요청을 설정하는 동안 문제가 발생했습니다.
console.log('Error', error.message);
}
console.log(error.config);
});validateStatus config 옵션을 사용하면, 오류를 발생시키는 HTTP 코드를 정의할 수 있다.
axios.get('/user/12345', {
validateStatus: function (status) {
return status < 500; // 상태 코드가 500 미만인 경우에만 해결
}
})toJSON을 사용하면, HTTP 에러에 대한 더 많은 정보를 객체 형식으로 가져온다.
axios.get('/user/12345')
.catch(function (error) {
console.log(error.toJSON());
});