1. Axios

• Axios는 웹 브라우저와 Node.js를 위한 HTTP 비동기(작성된 순서대로 실행되지 않는 처리) 통신 라이브러리다.

1.1 Fetch vs Axios

1. Fetch의 경우 자바스크립트에 내장되어 있기 때문에 별도의 import나 설치가 필요하지 않다. 하지만 Axios의 경우 간단하지만, 위의 사용법 설명처럼 설치 과정이 필요하다.
2. Fetch는 일부 예전의 인터넷 익스플로러 버전에서 지원하지 않는 경우가 있어, Axios가 Fetch보다 브라우저 호환성이 뛰어나다.
3. Fetch에서는 지원하지 않는 JSON 자동 변환, 응답 시간 초과 설정 기능 등을 Axios에서 지원해준다.

=> 이것도 자신의 개발목적, 환경에 따라서 맞게 선택하는 것이 좋다.

1.2 사용법

• index.html에 아래 두 스크립트를 추가해주면 axios 라이브러리를 손쉽게 사용할 수 있다.

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

1. POST

axios.post(url, data 객체)
axios
  .post('https://reqres.in/api/login', inputData)
  .then(response=> {
  	{DOM}.innerHTML = response.data.token
  })

POST는 새로운 자원을 생성할 때 사용한다. POST요청 후 반환되는 토큰 값을 then을 이용해 사용할 수 있다.

2. GET

axios.get(url)
axios
  .get('https://reqres.in/api/users/2')
  .then(response => {
    const userData = response.data.data
    name.innerHTML = `${userData.first_name} ${userData.last_name}`
    email.innerHTML = userData.email
  })

GET은 자원을 요청할 때 사용한다. POST와 마찬가지로 then/await을 이용해 결과값을 이용할 수 있다.

3. PUT

axios.put(url, data 객체)
axios
  .put('https://reqres.in/api/users/2', { "first_name": "White", "last_name": "Rabbit" , "email": "alice@elice.io" })
  .then(({data}) => {
    name.innerHTML = `${data.first_name} ${data.last_name}`
    email.innerHTML = data.email;
    updateDate.innerHTML = data.updatedAt;
  })

• PUT은 자원을 갱신할 때 사용한다. 넘겨진 객체(put의 인자)를 반환하고 그것을 then을 이용해 확인할 수 있다.
• 일부만 변경하고 싶을 땐 patch()를 사용하면 된다. 결과값은 put()과 동일하다.

4. DELETE

axios.delete(url)
axios
  .delete('https://reqres.in/api/users/2')
  .then(response => {
    status.innerHTML = response.status;
  })

DELETE는 자원을 삭제할 때 사용한다. 다른 메소드들과 달리 데이터를 결과값으로 주지는 않는다.