Axios 패키지 매니저 설치
yarn add axios

axios.get(url,[,config])

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

www.yourserver.com/login?id=Hnk&pw=1234
웹 사이트 뒤에 쿼리스트링이 붙여진 것을 볼 수 있다 => GET은 서버에서 어떤 데이터를 가져와서 보여준다거나 하는 용도 => 주소에 있는 쿼리스트링을 활용해서 정보를 전달하는 것이지 GET메서드는 값이나 상태등을 바꿀 수 없다.

import axios from 'axios';
axios.get('https://my-json-server.typicode.com/zofqofhtltm8015/fs/user').then((Response)=>{
    console.log(Response.data);
}).catch((Error)=>{
    console.log(Error);
})

> [
  { id: 1, pw: '1234', name: 'JUST' },
  { id: 2, pw: '1234', name: 'DO' },
  { id: 3, pw: '1234', name: 'IT' }
]

Json 형태로 받아온다.

POST

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

새로운 리소스를 생성 할 때 사용

post 메소드의 두 번째 인자는 본문으로 보낼 데이터를 설정한 객체 리터럴을 전달.
✔ 로그인, 회원가입 등 사용자가 생성한 파일을 서버에다가 업로드할때 사용합니다. Post를 사용하면 주소창에 쿼리스트링이 남지 않기때문에 👍 GET보다 안전해요

Delete

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

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

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

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

axios.delete("/thisisExample/list/30").then(function(response){
    console.log(response);
      }).catch(function(ex){
      throw new Error(ex)
}

PUT

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

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

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

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