Axios 러닝 가이드

Axios?

• Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리
• Ajax와 더불어 사용

☝🏻 설치 및 적용하기

//설치하기
yarn add axios

//임포트
import axios from 'axios'

HTTP Methods

• 클라이언트가 웹서버에게 사용자 요청의 목적/종류를 알리는 수단

GET

사용

• DB에서 데이터를 받아올 때 사용
• 로그인, 게시판 로드 등

☝🏻 쿼리스트링

• 로그인 시 get을 사용하여 구현했을 때 주소창에서 쿼리스트링을 확인할 수 있다.
• 사용자가 웹프로그램으로 입력 데이터를 전달하는 가장 단순하고 널리 사용되는 방법으로 URL 주소 뒤에 입력 데이터를 함께 제공하는 방법

http://localhose:3000/folder/file?쿼리스트링

• 쿼리스트링을 활용해 정보를 전달

형태

axios.get(url,[,config])

예시

axios
  .get('/api/review')
//성공
  .then((res) => {
  	console.log(res)
  })
//실패
  .catch((err) => {
    console.log(err)
  })

POST

사용

• DB에 새로운 리소스 생성
• 게시글 추가
• get과 다르게 주소창에 쿼리스트링이 남지 않기 때문에 get보다 안전하다.

형태

axios.post("url주소",{data객체},[,config])

예시

axios
//url과 요청할 데이터
 .post("/api/review", { title: title, content: content })
//성공
 .then((res) => {
	console.log(res)
    })
//실패
 .catch((err) => {
    console.log(err)
    })

PUT

사용

• DB에 저장되어 있는 내용을 갱신
• 게시글 수정

형태

axios.put(url[, data[, config]])

예시

axios
////특정 url과 수정할 데이터
  .put(`/api/review/${reviewId}`, {title: title, content: content})
//성공
  .then((res) => {
        console.log(res)
  })
//실패
  .catch((err) => {
        console.log(err)
  })

Delete

사용

• DB에 저장되어 있는 내용을 삭제할 때 사용
• 게시글 삭제

☝🏻 Delete는 HTML Form 태그에서 지원하는 HTTP 메서드가 아님!

형태

axios.delete(URL,[,config]);

예시

axios
  .delete(`/api/review/${reviewId}`)
//성공
  .then((res) => {
        console.log(res)
  })
//실패
  .catch((err) => {
        console.log('err')
  })

instance

• axios 객체를 전역으로 만들면, 매번 헤더나 url 전체를 설정해주지 않아도 된다.

const instance = axios.create({
	baseURL: "요청보낼 서버 도메인" // 요청을 www.aa.com/user로 보낸다면, www.aa.com까지 기록
    headers: { authorization: `Bearer ${getCookie("token")}` },
});

• 만약 instance를 사용해 axios를 진행한다면 PUT, POST, GET, Delete에서 axios 대신 instance를 넣어 전역으로 사용