[day07][後端][學習] API各種參數傳送與接收

12th鐵人賽

驢子

2020-09-22 18:23:43

8322 瀏覽

同步發表到驢形筆記

各種參數與接收

在上一篇已經實做過兩種協定類型的API了，常用的協定有get、post、put、patch和delete五種。在這邊我們用get和post兩種作示範，在下一篇再繼續測試另外三種和如何進行選擇。

好的，API在呼叫的時候有兩種方法可以帶參數到後端過去。第一種是用網址帶參數，第二種是帶到body裡面傳到後端去。這邊我們先實作get，前往"views/test.ejs"

views/test.ejs

<!DOCTYPE html>
<html>
  <head>
    <title>測試頁面</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>這是測試頁面</h1>
    <p>Welcome to 這是測試頁面</p>
    <button id="callGetApi">GET API</button>
    <br>
    <button id="callPostApi">POST API</button>
    <br>
    <a href="./">前往首頁</a>
    <script>
        let callGetApiButton = document.getElementById('callGetApi');
        callGetApiButton.addEventListener('click',async function(){
          let result = await fetch('/test/get?id=helloworld').then(res=>{
            return res.text();
          })
          alert(result);
        })
  </script>
  </body>
</html>

接著前往"routes\test.js"增加路線

routes\test.js

略
router.get('/get', function(req, res, next) {
  res.json({
    status: 'OK',
    value: 'hello get！建立好囉！'
  });
});
module.exports = router;

打開伺服器用遊覽器前往test頁面(http://localhost:3000/test )，應該會看到兩個按鈕。按下GET API這個按鈕就能看到目前的成果

接著實作參數，讓我們在發出請求的時候多一段"?id=hellword"

views\test.ejs

略
        let callGetApiButton = document.getElementById('callGetApi');
        callGetApiButton.addEventListener('click',async function(){
          let result = await fetch('/test/get?id=helloworld').then(res=>{
            return res.text();
          })
          alert(result);
        })
略

回到伺服器取得該參數

routes\test.js

略
router.get('/get', function(req, res, next) {
  res.json({
    status: 'OK',
    value: 'hello get！建立好囉！',
    query: req.query
  });
});
module.exports = router;

重新開啟伺服器後回到頁面(http://localhost:3000/test )，參數就會被帶回網頁

好的，接著實作另一種網址參數帶法！更改"views\test.ejs"

views\test.ejs

略
    <button id="callGetApi">GET API</button>
    <button id="callGetApi2">GET API2</button>
略
        <script>
略
        let callGetApi2Button = document.getElementById('callGetApi2');
        callGetApi2Button.addEventListener('click',async function(){
          let result = await fetch('/test/get/12345678?id=helloworld').then(res=>{
            return res.text();
          })
          alert(result);
        })
        </script>
  </body>
</html>

接著前往建立路線

routes\test.js

略
router.get('/get/:id', function(req, res, next) {
  res.json({
    status: 'OK',
    value: 'hello get2！建立好囉！',
    query: req.query,
    params: req.params
  });
});
module.exports = router;

重開伺服器後到網頁點擊GET API2就能到結果

有看出區別了嗎？在第二個範例中我們將路由設定成了動態路由"/get/:id'"也就是說這個路線後面會被認為是參數並可以在伺服器使用"req.params"進行撈取，跟利用"?"後帶參數不同且不會互相影響。這樣兩種網址帶參數的方式就實現了，這邊有點複雜建議多看幾次反覆推測之後再繼續看如何帶資料。（這邊能推測出來並會用很重要，因為下一篇會繼續實作並運用這部分的用法。）

如果上面你已經可以推測出大概了，那就開始帶資料吧。前往"views\test.ejs"

views\test.ejs

略
<script>
略
        let callPostApiButton = document.getElementById('callPostApi');
        callPostApiButton.addEventListener('click',async function(){
          let result = await fetch('/test/post/12345678?id=helloworld',{
            method: 'post',
            body: JSON.stringify({
              id: 987654321
            }),
            headers: {
              'content-type': 'application/json'
            },
          }).then(res=>{
            return res.text();
          })
          alert(result);
        })
  </script>
  </body>
</html>

為什麼不用get？？因為get沒有body這個東西，所以沒辦法把資料藏起來。接著建立路線

routes\test.js

略
router.post('/post/:id', function(req, res, next) {
  res.json({
    status: 'OK',
    value: 'hello post！建立好囉！',
    query: req.query,
    params: req.params,
    body: req.body
  });
});
module.exports = router;

重新開啟伺服器後，回到網頁按下post api吧

這樣各種帶資料的方式就算是學習完成，且"動態路由"的概念在框架使用也會用到，明天會進行其他協定的製作並說明如何選擇。基本上程式碼幾乎都一樣，就是協定上的不同而已。可以自己先試試看，利用今天的內容去推測其他協定如put、patch和delete並不會太困難，請務必反覆推敲並試試看。