axios

axios

node.js 와 브라우저를 위한 Promise 기반 http 클라이언트

http를 이용해 서버와 통신하기 위해 사용하는 패키지

 

axios 설치

yarn add axios

 

json-server 설정

content 부분 없애기

 

요청

GET

이제 response.json()으로 json을 해석하는 과정이 필요없다

 

POST

 

id는 랜덤 string으로 생성됨

 

 

DELETE

- axios로 서버에 delete 요청

- 브라우저 화면에서도 사라지도록 삭제한 id의 todo를 state에서 filter 해줌

 

PATCH

- PATCH: 원래 있던 값에서 원하는 값만 업데이트 (일부수정)

- PUT: 기존 값을 무시하고 완전 수정

 

Custom Instance

위 내용들은 기타 설정을 전혀 적용하지 않은 순수한 Axios를 사용하는 방식

그러나 애플리케이션이 커질수록 매번 동일한 설정을 반복하는 것은 비효율적

baseURL이나 공통 ㅇ헤더를 여러 곳에서 반복 설정하는 대신 axios 인스턴스를 사용해 이를 간단하게 해결할 수 있음

 

 

Interceptor

HTTP 요청을 가로채서 특정 작업을 수행할 수 있게 함

 ex. 모든 요청에 공통 헤더 추가, 응답에 대한 공통적인 에러처리

 

Interceptor가 흐름을 가로채는 상황

1) 요청이 전송되기 전

2) 응답의 then(성공) 또는 catch(실패)가 처리되기 전

 

설정하기

axios 폴더 생성 > api.js 파일 생성 > 여기에 custom instance를 만들어볼 것

이렇게 나만의 axios 설정을 만들어두면 실제로 axios를 사용하는 곳에서 import axios대신 이 인스턴스를 import해서 사용하면 된다

 

const { data } = await api.post("/todos", doto);

axios.get -> api.get 과 같이 사용하고, 설정에서 baseURL을 지정해줬으므로 이제 db.json의 주소까지 설정해줄 필요 없음

 

request.use()

요청을 보내기 전 어떤 것을 수행할 것인지 지정해준다

console.log를 요청 보내기 전에 수행함

config는 보내려던 요청 (return config 이제 요청 보내라)

 

response.use()

1) 응답을 받았을 때 어떤 것을 수행할 것인지 2) 에러가 발생했을 때 어떤 것을 수행할 것인지 지정