axios

HTTP를 이용해서 서버와 통신하기 위해 사용하는 패키지
fetch와 기능이 유사하다

• yarn add axios 명령어로 설치

axios는 fetch와 다르게 response.json()같은 방식으로 객체화 시킬필요가 없다

axios - post

<line 19> axios.post('URL', 추가할 내용)으로 서버에 데이터를 추가한다

axios - delete

<line 2> axios.delete('URL', 삭제할 id)로 서버에 있는 데이터를 삭제한다
이후 해당 id와 일치하지 않는 id를 가진 데이터들을 보여주는 방식으로 렌더링했다

axios - patch

• patch : 값의 일부를 수정한다
• put : 값을 완전히 바꾼다
  
  <line 2> axios.patch('URL', 수정할 데이터의 id, 수정된 내용)로 서버에 있는 데이터를 수정한다
  이 후 해당 id와 데이터의 id가 일치하면 title을 수정한 내용으로 변경해주었다

Custom Instance

baseURL 이나 공통 헤더를 여러곳에 반복해서 설정하는 대신, axios 인스턴스를 사용하여 간단하게 만들어 줄 수 있다

생성

별도의 파일을 만들어 주고 axios.create({})로 만들어준다

적용

기존에 반복되던 URL 주소대신 api.post , api.get, api.delete, api.patch로 적용했다

Interceptor

HTTP 요청과 응답을 가로채서 특정 작업을 수행할 수 있게 한다

• 인터셉터는 두 상황에서 흐름을 가로챈다

1. 요청(request)이 전송되기 전 또는 요청을 보내기 전, 요청이 출발하기 전
2. 응답(response)의 then(성공) 또는 catch(실패)가 처리되기 전

인터셉터를 사용하면 요청 및 응답 시 필요한 작업을 한꺼번에 처리할 수 있다
ex). 요청 헤더 추가, 인증 관리, 로그 관련 로직 삽입, 에러 핸들링

생성

기존 instance를 파일에 로직을 작성했다
인터셉터는 인자를 2개를 받는다