[axios] axios 기본

Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트로
npm install axios로 설치를 진행할 수 있다.

라이브러리를 설치하고 나면 axios라는 변수에 접근할 수 있게 된다.

✍️axios 응답 제어

🙂 .then

비동기 통신이 성공했을 경우, .then()은 콜백을 인자로 받아 결괏값을 처리할 수 있다.

🙂 .catch

.catch() 를 통해 오류를 처리한다. error 객체에서는 오류에 대한 주요 정보를 확인할 수 있다.

---

✍️ axios HTTP 요청 메서드 종류

🙂 axios.get(url[, config])

서버에서 데이터를 가져올 때 사용하는 메서드.
두 번째 파라미터 config 객체에는 헤더(header), 응답 초과시간 (timeout), 인자 값(params) 등의 요청 값을 같이 넘길 수 있다.

🙂 axios.post(url[, data[, config]])

서버에 데이터를 새로 생성할 때 사용하는 메서드. 두 번째 파라미터 data에 생성할 데이터를 넘긴다.

---

✍️ axios HTTP 요청 Config 옵션

• method
  method는 요청을 할 때 사용할 요청 메서드로, 기본값은 get이다.

• url
  url은 액시오스 요청에 사용될 서버의 URL을 의미한다.

• baseURL
  액시오스 인스턴스를 생성할 때, 인스턴스의 기본 URL 값을 정할 수 있는 속성.
  API 서버의 기본 도메인을 설정하고, 인스턴스 별로 URL을 뒤에 추가하여 사용한다.

• headers
  헤더를 수정해서 보내야 한다면 headers를 사용하면 된다.

• params
  params는 HTTP 요청에 붙일 URL 파라미터를 의미한다. 예를 들어, 아래 예시 코드는 https://domain.com이라는 URL로 HTTP 요청을 보냈을 때 https://domain.com?id=123으로 전달하는 것과 같은 효과를 가진다.
  여기서 params가 null이나 undefined인 경우에는 파라미터가 조합되지않으니 주의!!!

  ```
  params: {
      id: 123
  }
  ```

• data
  data는 HTTP 요청 보디에 실어서 보낼 데이터를 의미하는데 주로 데이터를 조작해야 하는 PUT, POST, DELETE, PATCH 등의 메서드에서 사용한다.

• timeout
  timeout은 HTTP 요청을 보내고 응답을 받기까지의 제한 시간을 설정하는 속성으로, 요청 시간이 지정된 값을 초과하면 에러가 발생한다.

• responseType
  responseType은 서버로부터 어떠한 데이터 형식으로 응답받을지 지정하는 것이다. 옵션으로는 arraybuffer, document, json, text, stream이 가능하며, 기본 값은 json이다.

  responseType: 'json'