Axios

Axios란?

• Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트로 동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있다.
  (Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.)

Axios 특징

• 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용
• Promise(ES6) API 사용
• 요청과 응답 데이터의 변형
• HTTP 요청 취소
• HTTP 요청과 응답을 JSON 형태로 자동 변경

Axios 설치

$ yarn add axios

//자신이 진행중인 프로젝트 상위에 import 시켜주기
import axios from 'axios'

Axios 메서드

1. GET (조회)

GET : 입력한 url에 존재하는 자원에 요청을 한다.

• 문법

axios.get(url,[,config])

GET은 서버에서 어떤 데이터를 가져와서 보여준다거나 하는 용도로
주소에 있는 쿼리스트링을 활용해서 정보를 전달하는 것이지 GET메서드는 값이나 상태등을 바꿀 수 없다.
응답은 json형태로 넘어온다.

2. POST (추가)

POST : 새로운 리소스를 생성(create)할 때 사용한다.

• 문법

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

POST 메서드의 두 번째 인자는 본문으로 보낼 데이터를 설정한 객체 리터럴을 전달한다.

3. Delete (삭제)

REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 삭제하는 목적으로 사용한다.

• 문법

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

✅ Delete메서드는 HTML Form 태그에서 기본적으로 지원하는 HTTP 메서드가 아니다.

Delete메서드는 서버에 있는 데이터베이스의 내용을 삭제하는 것을 주 목적으로 하기에 두 번째 인자를 아예 전달하지 않는다.

4. PUT (변경)

REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 갱신하는 목적으로 사용된다.

• 문법

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

✅ PUT메서드는 HTML Form 태그에서 기본적으로 지원하는 HTTP 메서드가 아니다.

PUT메서드는 서버에 있는 데이터베이스의 내용을 변경하는 것을 주 목적으로 하고 있다.

문서로만 읽었을 때 어떻게 사용하는지 이해가 잘 안갔는데 프로젝트 하면서 CRUD 성공!