Ajax, Axios

Ajax?

• Asynchronous Javascript and Xml의 약자, 비동기식 자바스크립트와 XML
• 데이터를 이동하고 화면을 구성하는데 화면 갱신 없이 필요한 데이터를 주고 받을 때 사용
  ex)단순하게 WEB 화면에서 페이지 전체를 새로고침하지 않고 데이터를 조회하고 싶을 때

XMLHttpRequest

• 서버와 상호작용하기 위하여 사용
• 모든 종류의 데이터를 받아오는데 사용, HTTP 이외의 프로토콜도 지원

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
        if (xhr.readyState === xhr.DONE) {
            if (xhr.status === 200 || xhr.status === 201) {
                console.log(xhr.responseText);
            } else {
                console.error(xhr.responseText);
            }
        }
 };

Axios?

• 뷰에서 권고하는 HTTP 통신 라이브러리
• node.js와 브라우저를 위한 Promise기반 HTTP 클라이언트

Axios 설치방법

• cdn 방식

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

• npm 방식

npm install axios

.then()

• 비동기 통신이 성공했을 경우, 콜백을 인자로 받아 결과를 처리할 수 있다

.catch()

• 오류를 처리할 때 사용

GET방식

• async / await

async function getUser() {
  try {
    const response = await axios.get('/replies/list/${bno}');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

POST방식

• async / await

async function sendPost(reply){
        const res = await axios.post('/replies/',reply)

        console.log(res)
}

####
1. 기본적으로 Json 방식으로 처리, Fetch API는 기본적으로 Json 방식이 아님
2. 비동기처리는 Promise로 리턴
3. async - await는 비동기식 처리에서 동기식처럼 코드를 처리할 수 있게 도와주는 것

Ajax 참고 - 1
Axios 참고 - 1, Axios 참고 - 2