230105 - JavaScript - AJAX, FETCH, AXIOS를 이용한 비동기 통신하기

  jQuery를 이용하지 않음.  

오늘 내가 배운 것

1. 비동기방식 통신이란?

2. 프론트엔드에서 데이터 요청하기

• AJAX
• fetch
• axios

 

 

비동기방식 통신이란?

동기식 방식은 요청을 보낸 후 응답을 받아야 다음 작업을 할 수 있지만 비동기 방식은 요청을 보내고 응답을 기다리지 않고 다른 일을 할 수 있는 상태이다.

 

그래서 이를 이용하면 웹 페이지를 새로고침 없이 원하는 데이터를 이용하여 웹 페이지의 구성을 바꿔 줄 수 있다.

 

 

프론트엔드에서 데이터 요청하기

 

지금 코드는 front 서버와 back 서버를 분리한 상태이고, MySQL을 이용하여 데이터베이스를 만든 후 데이터가 있는 상태에서 그 값을 back 서버의 라우터를 이용하여 불러오는 과정이다. front와 back 서버가 분리되어 있기 때문에 cors 처리도 다 해야 한다.

https://baekspace.tistory.com/105

230104 -JavaScript DB를 이용한 댓글 기능 만들기

 

 

AJAX

Asynchronous Javascript And XML

자바스크립트를 이용한 비동기 통신으로, 클라이언트와 서버 간에 데이터를 주고받을 수 있는 기술이다.

jQuery를 이용하지 않은 순수 javascript로 작성하였다.

 

XMLHttpRequest()

const request = ({method, path, body}) => {    
    return new Promise ((resolve, reject)=>{
        const host = "http://127.0.0.1:3000"
        const xhr = new XMLHttpRequest()  // {}
        xhr.open(method, `${host}${path}`) //요청세팅
        xhr.setRequestHeader("Content-Type", "application/json")//요청세팅

        xhr.send(JSON.stringify(body)) //요청을 보낸다.

        xhr.onload = () =>{ // 응답 받는 역할
            if(xhr.readyState === 4 && xhr.status === 200){
                resolve(JSON.parse(xhr.response))
            }else{
                reject("ERR")
            }
        }
    })
}


const ajax = async() => {
    const result = await request({method : "get", path: "/comments", body :null})
    console.log(result)
}
ajax()

 

XMLHttpRequest를 이용하여 작성하면 위에 코드와 같이 요청 형태를 만들어주고 요청을 보내서 응답을 받는 과정까지 구현해줘야 하기 때문에 코드의 양이 많이 길어진다. 그래서 fetch를 이용하여 코드를 줄여줄 수 있다.

 

 

fetch()

// fetch

const ajax2 = async () =>{
const response = await fetch("http://127.0.0.1:3000/comments",{
    method:"get",
    body: null
})

const result = await response.json()
console.log(result)
}
ajax2()

 

fetch를 이용하여 위 코드로 작성할 수 있고,  response가 promise 객체로 반환되어 async/await을 한번 더 사용하여 result 값을 얻는다. fetch 메서드는 javascript의 스펙이다. 

 

반환값이 promise객체이기 때문에 async/await를 2번 쓰는 상황을 불편하다 느끼고 AXIOS를 만들었다.

 

AXIOS

axios는 외장모듈로 npm을 이용하여 설치를 하거나 script로 연결하여 작성해야 한다.

        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

HTML에 작성한다.

       //웹을 구성하는 js 파일 위에 작성한다.
       <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="/js/AJAX.js" type="text/javascript"></script>

 

const ajax3 = async () => {
    const result = await axios.get("http://127.0.0.1:3000/comments") // {}
    console.log(result.data)
}
ajax3()

axios의 반환값도 promise 객체로 반환된다.

 

 

위에서부터 XHR, fetch, axios를 사용하여 나온 모든 값들은 동일하다.

본인이 원하는 방식을 쓰면 된다!! ( 나는...axios...)

 

AXIOS 공식 문서 :  https://axios-http.com/kr/docs/intro

 

---