私たちが使っているインターネットはhttp通信です.

HTTP通信

プロトコル

通信プロトコルまたは通信規約は、コンピュータまたは遠隔通信装置間で情報を交換するフォーマットおよびルールの体系である.(出典:ツリーウィキ)
代表的なのは以下の点です.
-HTTP : Hyper Text Transfer Protocol
-HTTPS : Hyper Text Transfer Protocol Secure
-FTP : File Transfer Protocol
-SFTP : Secure File Transfer Protocol
ここでhttp通信について説明します.

こうぞう

HTTP通信は、要求を送信するメッセージと、応答を受信するメッセージである.
ブラウザで、[F 12]をクリックして[NETWORK]タブを表示します.△Firefoxで勉強することをお勧めします.

メッセージ構造

ネイバーのFireFoxでNETWORKタグを見ると次のような内容になります

応答側はこのように与えられた.

ひどうきつうしん

基本的にHTTP通信は同期しています.1つのリクエストに応答する前に、他の応答の構造に答えることはできません.たとえば、htmlページを開くと、他の操作は実行されません.

動機。

逐次漸進的です.タスクの完了時に他のタスクは実行されません.

非同期

はパラレル実行です.shortin方式で運営されています.短時間の運行は速い.fetch、axiosなどは、ページを再ロードすることなく、ページ内で必要な結果値を得ることができます.

fetch

fetchはJavaScript内の内蔵関数であり,リモートAPIを容易に呼び出すことができる.

構文

fetch()関数は2つのパラメータ値を受け入れます.1つ目はuriで、2つ目はオプションのオブジェクトを受信します.Promiseタイプのオブジェクトを返します.API呼び出しが成功すると応答オブジェクトが解析され、失敗するとエラーオブジェクトが拒否されます.

fetch('url',options)
.then(res=>{
      return })
.catch((e)=>{
  console.loge(e);)  

適用

server.jsファイル

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('0525index',{
        title:'ingoo'
    })
});

app.get('/login',(req,res)=>{
    let {userid,userpw}= req.query;
    console.log(userid,userpw);

    res.setTimeout(3000,()=>{
        res.send(`GET OK ${userid}/${userpw}`)
    })
    //res.send(`GET OK ${userid}/${userpw}`)
});

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


app.listen(3000,()=>{
    console.log('server start 3000')
});

GET

#index.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:3000/login?userid=asdf&userpw=asdf',options)
        .then(data =>{
            return data.text();
        })
        .then(text=>{
            const root = document.querySelector('#getroot');
            root.innerHTML += text+'<br />';
        })
    }
</script>

GET-page/headers

GET-headers

POST

<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',
            headers:{
                'content-type':'application/x-www-form-urnencoded',
            },
            body:'userid=asdfasdf&userpw=asdfasdf',
            }
            fetch('http://localhost:3000/login',options)
            .then(data =>{
                return data.text();
            })
            .then(text =>{
                const root = document.querySelector('#postroot');
                root.innerHTML += text+'<br />';
            })
    }
</script>

####POST-page/headers

####POST-headers


これに基づいてリクエストヘッダを作成します.

こうなります.このように挿入されたタイトル:{}がタイトルに追加されることに注意します.
情報を理解することが大切です.これが分からないので、APIドキュメントを読んでも内容が分からないし、どう書くか分からない.