axios란

axios는 http request와 response를 위해 사용하는 Promise 기반 Javascript 서드파티 라이브러리이다.

설치

Node.js 혹은 npm을 다운받은 이후 터미널에 아래 커맨드를 입력하면 된다.

npm install axios

프로퍼티

data

body의 데이터.

메소드

create

axios.create([config])

새로운 axios 인스턴스를 만들어 반환한다.

config

객체 형태의 사용자 지정 설정. 아래는 설정할 수 있는 property 목록이다. 아래의 property를 선택적으로 포함한 객체를 넘겨주면 된다.
create method에서 사용할 경우, 해당 인스턴스의 기본 설정이 된다.

• baseURL : 문자열 형태의 url. 새로운 인스턴스를 형성할 때 주로 들어간다.
• method : request의 http method 종류. 문자열 형태로 기본값은 GET.
• headers : 요청에 추가하고자 하는 header의 내용. 객체 형태이다.
• params : query parameter(속성) 설정. 객체 형태이다. 자동으로 url 뒤에 query string을 붙인다. 속성의 값이 null 혹은 undefined라면 무시된다.
• timeout : 넘어가면 Request가 중단되는 시간.
• withCredentials : boolean. 자격 증명(cookie, Authorization header, 인증서 등)에서 Cross Origin(Cross-site, 다른 도메인) request 허용 여부. Cross Origin 쿠키 저장을 위해서는 true로 두어야 한다. mdn 문서 참고.

더 다양한 property들은 여기를 참고하라.

get

axios.get(url, [config])
인스턴스.get(url, [config])

Promise 객체를 반환하는 비동기 함수. URL에 GET Request를 보낸다.
인스턴스인 경우에는 baseURL url을 합친 URL에 Request를 보낸다.

• 반환값은 Promise 객체이다.
  • Fulfilled 시 : 상태 코드가 2로 시작하는 Response 객체.
  • Rejected 시 : Error (객체) / 에러 Response 객체.
• url : 문자열 형태의 URL.
• config : 참고.

delete

axios.delete(url, [config])
인스턴스.delete(url, [config])

Promise 객체를 반환하는 비동기 함수. URL에 DELETE Request를 보낸다.
인스턴스인 경우에는 baseURL url을 합친 URL에 Request를 보낸다.

• 반환값은 Promise 객체이다.
  • Fulfilled 시 : 상태 코드가 2로 시작하는 Response 객체.
  • Rejected 시 : Error (객체) / 에러 Response 객체.
• url : 문자열 형태의 URL.
• config : 참고.

post

axios.post(url, [data], [config])
인스턴스.post(url, [data], [config])

Promise 객체를 반환하는 비동기 함수. URL에 POST Request를 보낸다.
인스턴스인 경우에는 baseURL url을 합친 URL에 Request를 보낸다.

• 반환값은 Promise 객체이다.
  • Fulfilled 시 : 상태 코드가 2로 시작하는 Response 객체.
  • Rejected 시 : Error (객체) / 에러 Response 객체.
• url : 문자열 형태의 URL.
• data : 보낼 데이터. js 객체를 그냥 보내는 것도 가능하다(자동으로 JSON으로 변환).
• config : 참고.

put

axios.put(url, [data], [config])
인스턴스.put(url, [data], [config])

Promise 객체를 반환하는 비동기 함수. URL에 PUT Request를 보낸다.
인스턴스인 경우에는 baseURL url을 합친 URL에 Request를 보낸다.

• 반환값은 Promise 객체이다.
  • Fulfilled 시 : 상태 코드가 2로 시작하는 Response 객체.
  • Rejected 시 : Error (객체) / 에러 Response 객체.
• url : 문자열 형태의 URL.
• data : 보낼 데이터.
• config : 참고.

patch

axios.patch(url, [data], [config])
인스턴스.patch(url, [data], [config])

Promise 객체를 반환하는 비동기 함수. URL에 PATCH Request를 보낸다.
인스턴스인 경우에는 baseURL url을 합친 URL에 Request를 보낸다.

• 반환값은 Promise 객체이다.
  • Fulfilled 시 : 상태 코드가 2로 시작하는 Response 객체.
  • Rejected 시 : Error (객체) / 에러 Response 객체.
• url : 문자열 형태의 URL.
• data : 보낼 데이터.
• config : 참고.

인터셉터

interceptor는 이름 그대로 request/response 전에 가로채서 특정 작업을 수행한다. request/response 전에 수행할 작업이나 request/response 에러 발생 시 수행할 작업을 설정할 수 있다. (공식 문서)

request

추가

axios.interceptors.request.use(func1, func2)
인스턴스.interceptors.request.use(func1, func2)

request 인터셉터를 추가한다.

• 반환값은 interceptor다.
• func1 : parameter 하나(config)를 받는 함수. 반환값은 config여야 한다.
• func2 : request error를 처리하는 함수. parameter 하나(error)를 받는다. 반환값은 rejected된 Promise다. (일반적으로 Promise.reject(error))

제거

axios.interceptors.request.eject(interceptor)
인스턴스.interceptors.request.eject(interceptor)

request 인터셉터를 삭제한다.

• interceptor : 삭제할 인터셉터.

response

추가

axios.interceptors.response.use(func1, func2)
인스턴스.interceptors.response.use(func1, func2)

response 인터셉터를 추가한다.

• 반환값은 interceptor다.
• func1 : parameter 하나(response)를 받는 함수. 반환값은 response여야 한다.
• func2 : response error를 처리하는 함수. parameter 하나(error)를 받는다. 반환값은 rejected된 Promise다. (일반적으로 Promise.reject(error))

제거

axios.interceptors.response.eject(interceptor)
인스턴스.interceptors.response.eject(interceptor)

response 인터셉터를 삭제한다.

• interceptor : 삭제할 인터셉터.