[220307] 응답코드를 여러가지 방식으로 작성하기 (fetch, axios, async/await)

작성할 코드의 조건

1. 아이디의 중복여부를 중복체크 버튼을 눌러 확인하자

2. 중복일 경우는 2, 중복이 아닐 경우는 1을 반환하는 코드를 작성하기

3. 회원가입 버튼을 눌러서 입력한 아이디, 패스워드 입력한 값을 보여주는 화면을 만들자

 

<div id="wrap">
    <form action="/join2" method="post" id="joinfrm">
        <!-- 중복체크 -->
        <input type="text" id="userid" name="userid" placeholder="아이디입력">
        <input type="button" id="idcheck_btn" value="중복체크">
        
        <input type="text" id="userpw" name="userpw" placeholder="패스워드입력">
        <input type="text" id="username" name="username" placeholder="이름입력">

        <input type="submit" value="회원가입">
    </form>
</div>

 

 

코드가 들어갈 자리

document.addEventListener('DOMContentLoaded',init)
function init(){
    const btn = document.querySelector('#idcheck_btn')
    const userid = document.querySelector('#userid')
    const msg = document.querySelector('#msg')

    btn.addEventListener('click',clickHandler)
    
    //함수는 이 곳에 작성된다.
}

---

 

응답코드 1 : XMLHttpRequest 선언해서 사용

function clickHandler(){
    const data = JSON.stringify({userid:userid.value})
    
    // Ajax
    const xhr = new XMLHttpRequest()
    xhr.open('POST','/idcheck',true) // 보낼 url Request method 정보를 넣는곳
    xhr.setRequestHeader('Content-type','application/json')
    // header내용을 변경가능 --> application/x-www-form-urlencoded
    xhr.send(data) // body영역에 내용을 넣어서 보낼 수 있음
    
    xhr.onreadystatechange = () => {
        if (xhr.readyState == 4 && xhr.status == 200) {
            try {
                // 가입가능 1, 가입불가능 2 
                let data = JSON.parse(xhr.response)
                if ( data.result === 2) throw new Error('아이디가 중복되었습니다.')
            } catch (e) {
                // 가입이 불가능할 경우
               console.log('가입이 불가합니다')
            }
        }
    }
}

 

---

 

응답코드2 : fetch

이 전에는 ajax로 정보를 주고받기 까다로웠으나 fetch문의 등장으로 편해졌다.

fetch 메서드는 자바스크립트에서 서버로 네트워크 요청을 보내고 응답을 받게해주는 자바스크립트의 내장객체다.

Promise를 기반으로 구성되어있어서 promise객체 구조와 같고, then을 사용할 수 있다.

• 첫번째 인자값으로 받은 url을 요청으로 보내고, then에서 응답객체 res를 받는다.
• 두번째 인자값으로 받은 객체로 요청body에 대한 추가적인 데이터를 입력할 수 있다.
  • method : 요청방식
  • headers : 요청 해더에 관한 정보
  • body : 요청 body에 보내는 데이터

 

function clickHandler2(){
    const data = JSON.stringify({userid:userid.value})

    // 자바스크립트의 내장객체인 fetch문은 코드를 깔끔하게 해준다.
    const option = {
        method:"POST",
        headers:{
            "Content-type":"application/json"
        },
        body:data
    }

    fetch('http://localhost:3000/idcheck',option) // promise 객체로 반환 
    .then( (response)=>{		// HTTP header정보 
        return response.json()		// body영역 promise 
    } )
    .then( (result) => {		// result HTTP body 
        console.log( result )
    } )
}

 

---

 

응답코드3 : axios 사용

Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트다.

동일한 코드 베이스로 브라우저와 node.js에서 실행할 수 있으며,

서버에서는 네이티브 node.js의 http 모듈을, 브라우저에서는 XMLHttpRequest를 사용한다.

npm install axios로 설치/사용이 가능하다.

• 브라우저를 위해 XMLHttpRequest생성, node.js를 위해 http 요청 생성
• Promise API를 지원
• 요청 및 응답 인터셉트, 데이터 변환
• 요청 취소
• JSON 데이터 자동 변환
• XSRF를 막기위한 클라이언트 사이드 지원이 가능하다

 

function clickHandler3(){
    const data = {userid:userid.value}
    // 편의성 stirng 
    // 로딩만들기 
    axios.post('http://localhost:3000/idcheck',data,{"Content-type":"application/json"})
    .then( (response) => {
        console.log(response.data)
        // 로딩지우기
    })
}

 

---

 

응답코드4 : axios와 async/await 사용

promise를 더 간단히 쓰기위한 async/await을 사용하면 더 간결한 코드를 작성할 수 있다.

단, then과 async/await을 혼용할 수 없으니 주의해서 코드를 작성하자.

 

async function clickHandler4(){
    const data = {userid:userid.value}
    // 요청을보내기전?
    // 로딩만들어~
    try{
        const response = await axios.post('http://localhost:3000/idcheck',data,{"Content-type":"application/json"})
    } catch (e) {
        console.log(e)
    }
    // 요청이 완료된후 ?
    // 로딩끝~
    console.log(response.data)
}