[05] React - Ajax

Ajax

서버에 새로고침 없이 요청을 할 수 있게 도와주는 간단한 브라우저 기능.
JavaScript를 이용한 비동기 통신, 클라이언트-서버간 XML 데이터를 주고받는 기술.

Ajax로 GET/POST요청 방법

1. XMLHttpsRequest
2. Vanilla Javascript fetch()
3. axios 라이브러리

---

Axio

• Promise(Es6) API 사용
• 요청과 응답 데이터의 변형
• HTTP 요청 취소
• HTTP 요청과 응답을 JSON 형태로 자동 변경

HTTP Methods

(1)Get
입력한 URL에 존재하는 자원에 요청을 한다.
GET메서드는 값이나 상태들을 바꿀 수 없다.

axios.get("URL주소",[config])

1. Querystring
   URL 뒤에 데이터를 입력하여 전달하는 방법

   www.HJC.com/login?id=HJ&pw=12

2. 객체로 보내기

axios.get('https://velog.io/@swch56')
	.then((res)=>{console.log(res.data)})
	.catch((error)=>{console.log(error)})

결과는 JSON형태로 반환됨

(2) Post
새로운 리소스를 생성할 때 사용한다.

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

Post 메서드의 두 번째 인자는 본문으로 보낸 데이터로 설정한 객체 리터럴을 전달.
사용자가 생성한 파일을 서버개발자에게 보내줄 때 이용.
Post를 사용하면 주소창에 쿼리스트링이 남지 않기때문에 GET보다 안전하다.

axios.post("/users/login",{ id, password })
  .then((res) => { console.log(res);})
  .catch((error) => {console.log(error.response);});

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

axios.delete("URL주소",[config]);

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

axios.put("URL주소",data,[config])