Axios
브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리
백엔드와 프론트엔드의 통신을 쉽게하기 위해 Ajax와 더불어 사용
Axios의 특징
- 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 HTTP API 사용
- Promise(ES6) API 사용
- Async/Await(ES7) API 사용
- 요청과 응답 데이터의 변형
- HTTP 요청 취소 및 요청과 응답을 JSON 형태로 지동 변경
axios vs fetch
- axios 써드파티 라이브러리 설치가 필요
- fetch 브라우저 빌트인
- axios XSRF(Cross-Site Request Forgery) 보호
- fetch 별도 보호 없음
- axios data속성을 사용
- fetch body속성을 사용
- axios data는 object를 포함
- fetch body는 문자열화
- axios status 200 statusText OK이면 성공
- fetch 응다객체가 ok속성 포함이면 성공
- axios 자동으로 JSON데이터 형식으로 변환
- fetch .json()메서드 사용해야 함
- axios 요청을 취소하고 타임아웃을 걸수 있음
- fetch 기능없음
- axios HTTP 요청을 가로챌 수 있음
- fetch 제공하지 않음
9 axios download 진행에 대해 기본적인 지원을 함
- fetch 지원하지 않음
- axios 많은 브라우저 지원
- fetch Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+이상에 지원
Axios 설치
서버에서 설치
yarn add axios클라이언트(html)에서 설치
jsDeliver /unpkg CDN 둘중 택
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Axios 문법 구성
axios({
url: 'https://test/api/cafe/list/today', // 통신할 웹문서
method: 'get', // 통신할 방식
data: { // 인자로 보낼 데이터
foo: 'diary'
}
});
axios(requset)파라미터 옵션
-
method : 요청방식(get이 디폴트)
-
url : 서버 주소
-
baseURL : url을 상대경로로 쓸대 url 맨 앞에 붙는 주소
url이 /post 이고
baseURL이 https://some-domain.com/api/ 이면
https://some-domain.com/api/post로 요청 가게 됨 -
headers : 요청 헤더
-
data : 요청 방식이 'PUT', 'POST', 'PATCH' 해당하는 경우 body에 보내는 데이터
-
params : URL 파라미터 ( ?key=value 로 요청하는 url get방식을 객체로 표현한 것)
-
timeout : 요청 timeout이 발동 되기 전 milliseconds의 시간을 요청
timeout 보다 요청이 길어진다면, 요청은 취소됨 -
responseType : 서버가 응답해주는 데이터의 타입 지정
(arraybuffer, documetn, json, text, stream, blob) -
responseEncoding : 디코딩 응답에 사용하기 위한 인코딩 (utf-8)
-
transformRequest : 서버에 전달되기 전에 요청 데이터를 바꿀 수 있음
요청 방식 'PUT', 'POST', 'PATCH', 'DELETE' 에 해당하는 경우에 이용 가능
배열의 마지막 함수는 string 또는 Buffer, 또는 ArrayBuffer를 반환
header 객체를 수정 가능 -
transformResponse : 응답 데이터가 만들어지기 전에 변환 가능
-
withCredentials : cross-site access-control 요청을 허용 유무
이를 true로 하면 cross-origin으로 쿠키값을 전달 할 수 있음 -
auth : HTTP의 기본 인증에 사용. auth를 통해서 HTTP의 기본 인증이 구성이 가능
-
maxContentLength: http 응답 내용의 max 사이즈를 지정하도록 하는 옵션
-
validateStatus : HTTP응답 상태 코드에 대해
promise의 반환 값이 resolve 또는 reject 할지 지정하도록 하는 옵션 -
maxRedirects : node.js에서 사용되는 리다이렉트 최대치를 지정
-
httpAgent / httpsAgent : node.js에서 http나 https를 요청을 할때 사용자 정의 agent를 정의하는 옵션
-
proxy : proxy서버의 hostname과 port를 정의하는 옵션
-
cancelToken : 요청을 취소하는데 사용되어 지는 취소토큰을 명시
axios 파라미터 문법 예시
axios({
method: "get", // 통신 방식
url: "www.naver.com", // 서버
headers: {'X-Requested-With': 'XMLHttpRequest'} // 요청 헤더 설정
params: { api_key: "1234", langualge: "en" }, // ?파라미터를 전달
responseType: 'json', // default
maxContentLength: 2000, // http 응답 내용의 max 사이즈
validateStatus: function (status) {
return status >= 200 && status < 300; // default
}, // HTTP응답 상태 코드에 대해 promise의 반환 값이 resolve 또는 reject 할지 지정
proxy: {
host: '127.0.0.1',
port: 9000,
auth: {
username: 'xxxxx',
password: 'xxxx'
}
}, // proxy서버의 hostname과 port를 정의
maxRedirects: 5, // node.js에서 사용되는 리다이렉트 최대치를 지정
httpsAgent: new https.Agent({ keepAlive: true }), // node.js에서 https를 요청을 할때 사용자 정의 agent를 정의
})
.then(function (response) {
// response Action
});Axios 응답 제어
axios.get('url')
.then(function(response) {
console.log(response.data) // 서버가 제공한 응답(데이터)
console.log(response.status) // 서버 응답 HTTP 상태 코드
console.log(response.statusText) // 서버 응답으로 부터의 HTTP 상태 메시지
console.log(response.headers) // 모든 헤더 이름이 소문자로 제공
console.log(response.config) // axios에 설정된 구성
})
.catch(function (error) {
if (error.response) {
console.log(error.response.status);
console.log(error.response.headers);
}
}).then
- 비동기 통신이 성공했을 경우 .then()은 콜백을 인자로 받아 결괏값을 처리
.catch
- 오류처리
- error 객체에서는 오류에 대한 주요 정보를 확인
- 응답 상태 코드 : error.response.status
- 응답 헤더 정보 : error.response.headers
Axios HTTP 요청 메서드 종류
자주사용하는 HTTP 요청 메서드
axios.get(url[, config])
- 서버에서 데이터를 가져올때 사용하는 메서드
- 두 번째 파라미터 config 객체에는
header, timeout, params 등의 요청 값을 같이 넘길 수 있음
axios.post(url[, data[, config]])
- 서버에 데이터를 새로 생성할 떄 사용하는 메서드
- 두 번째 파라미터로 생성할 데이터를 넘김
axios.put(url[, data[, config]])
- 특정 데이터를 수정할 때 요청하는 메서드
- put은 새로운 리소스를 생성하거나, 이미 존재하는 데이터를 대체할 때 사용
axios.delete(url[, config])
- 특정 데이터나 값을 삭제할 때 요청하는 메서드
