[TIL] Axios

Axios + React Query 사용 전, Axios에 대해 먼저 정리해보자 🥸

Axios

자바스트립트 어플리케이션에서 서버와 통신할 때(데이터 가져올 때) 사용되는 HTTP 비동기 통신 라이브러리

🔥 특징

• 브라우저를 위해 XMLHttpRequests(XHR) 객체 생성
• Promise 기반으로 만들어져서 데이터 다루기가 편하다
• http 요청과 응답을 JSON 형태로 자동으로 변경해준다
• 브라우저 호환성이 뛰어나다

✨ 요청

axios 요청에 여러가지 정보들을 작성하여 전달하면 서버와 연결이 가능하고, 새로운 axios 인스턴스를 만든다.

const instance = axios.create({
    baseURL: 'https:// ~~~ ",
    timeout: 1000,
    headers: { Authorization: `Bearer ${accessToken}` },
})

• url: 서버 주소 (필수)
• method: 통신 방법(get, post, put, delete)
• baseURL: 서버 주소(url) 앞에 붙는 주소
• timeout: timeout보다 요청이 길어지면, 요청은 취소된다
• headers: 사용자 지정 헤더. http 요청 헤더에 추가 정보를 제공하는데 사용된다
• data: request body로 전송될 데이터
• params: 요청 시, 서버에 필요한 추가적인 정보를 함께 전달하는 url 파라미터. 객체 형태. query의 경우에만 사용

params: { courseSeq: 55, elementCnt: 10 }

*params로 url의 파라미터로 정보를 전달한다. '?courseSeq=55&elementCnt=10'로 나타난다

axios({
      method: 'delete',
      url: `https://***`,
      headers: { Authorization: `Bearer ${accessToken}` },
      data: { courseSeq, userSeq }
      }),

이 요청에서는 무분별한 데이터 접근을 막기 위해 headers에 Authorization에 토큰을 넣어줬다. 이 토큰 값이 있어야 데이터에 접근을 할 수 있도록 한다. headers에서는 Bearer와 API 인증 토큰을 조합하여 HTTP 요청 헤더에 추가함으로써, API 서버에서 해당 사용자가 인증되었는지 확인하고, 필요한 권한을 부여하여 API를 호출할 수 있도록 한다.

✨ 단축 메서드

GET: axios.get(url, [config])
POST : axios.post(url, [config])
PUT: axios.put(url, [config])
DELETE : axios.delete(url, [config])