HTTP 비동기 통신

2021.05.25 - [Lecture] - HTTP 동기 통신

 

저번글은 HTTP 통신중 동기 통신에 대해서 다뤘다.

 

동기통신은 요청 하나 => 응답 하나 이런 식으로 http프로토콜을 따른다

 

그래서 버튼을 눌렀을때 새로운 페이지가 로딩되면서 정보값을 주고 받는다

 

하지만 만약 내가 현재 있는 페이지에서 페이지 로딩 없이 계속해서 요청과 응답을 주고 받고 싶다면 비동기 통신을 이용해야 한다.

 

비동기 통신의 방법 중에 axios를 사용할 수 도 있지만 이번에는 fetch를 사용했다.

 

전체 코드

HTML

 

<h1>비동기 활용하기 GET</h1>
<button id="btn">통신하기</button>
<div id="getroot"></div>
<script type="text/javascript">
const btn = document.querySelector('#btn');
btn.addEventListener('click',btnFn);
function btnFn(){
    console.log(('req click'));
    let options = {
        method:'GET',
    }
    fetch('http://localhost:3001/login?userid=asdf&userpw=asdf',options)
    .then(data=>{
        return data.text();
    })
    .then(text=>{
        const root = document.querySelector('#getroot');
        root.innerHTML += text+'<br/>'
    })
}
</script>

<h1>비동기 활용하기 POST</h1>
<button id="btn2">통신하기</button>
<div id="postroot"></div>
<script type="text/javascript">
const btn2 = document.querySelector('#btn2');
btn2.addEventListener('click',btnFn2);
function btnFn2(){
    console.log(('req click'));
    let options = {
        method:'POST',
    }
    fetch('http://localhost:3001/login?userid=asdf&userpw=asdf',options)
    .then(data=>{
        return data.text();
    })
    .then(text=>{
        const root = document.querySelector('#postroot');
        root.innerHTML += text+'<br/>'
    })
}
</script>

 

 

JAVASCRIPT

 

const express = require('express');
const nunjucks = require('nunjucks');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.urlencoded({extended:false}));
app.set('view engine','html');
nunjucks.configure('views',{
    express:app,
})

app.get('/',(req,res)=>{
    res.render('index')
})

app.get('/login',(req,res)=>{
    let {userid,userpw} = req.query;
    console.log(userid,userpw);
    res.setTimeout(3000,()=>{
        res.send(`GET OK ${userid}/${userpw}`)
    });
});

app.post('/login',(req,res)=>{
    let {userid,userpw} = req.body;
    console.log(userid,userpw)
    res.setTimeout(3000,()=>{
        res.send(`POST OK ${userid}/${userpw}`)
    });
});

app.listen(3001,()=>{
    console.log('start')
})

 

fetch를 사용할 때 url + uri 를 사용해서 querystring으로 값을 주고 그 값을 화면에 표출하도록 설정을 했다.

 

 

1. GET

 

 

 

---

 

 

 

 

2. POST 

 

 

 

---

 

 

 

눈으로 보기에 get 과 post둘의 차이가 특별히 다르지는 않다.