Day3學前端 Frontend with React - 串接API with Ajax

tags: frontend

Copyright 2021, 月下麒麟

---

Target

當前端與後端(backend)訂定完API後，即可各自進行工作
這邊要提及的是如何在前端接收來自後端API的資料呢?

Concept

在舉例之前，得先了解對相關腳色與對應行為

資料庫
C(create), R(read), U(update), D(delete)

後端
Post, Get, Put, Delete

前、後端溝通的API

http://127.0.0.1:8000/user/1
http://127.0.0.1:8000/users?index=1&end=10

Request-
點擊瀏覽器 -> (前端) -> Request -> (後端) -> 要資料 -> (資料庫)

Response-
(資料庫) -> 給資料 -> (後端) -> Response -> (前端) -> 顯示資料於瀏覽器

Implement

知道前後端如何溝通的行為後，會發現到當前端只要取得Request API
這樣就針對該支API去顯示資料即可

第二天的Hello World已經能成功的修改app.js檔
今天要延續這個檔案的修改操作

Backend API Value
假設我們後端的API已經製作完成了，它其實是會有值(value)
另外，由於網路傳遞資料大多是使用JSON格式
故後端丟出來的資料也會以JSON格式呈現

(後端之Browser view)

接收 API

let url= "http://127.0.0.1:8000/user/2";
let xh = new XMLHttpRequest();
xh.open('GET',url,true);
xh.send();
xh.onreadystatechange = function(){
 if(this.readyState === 4 && this.status === 200){
 let response = JSON.parse(this.response);
 console.log(response);
 }
};

小重點:
1.將XMLHttpRequest函式實作物件丟到變數xh，利用該變數進行一些操作，最後取得respose的內容

2.var, let, const宣告變數的差異。
reference:JavaScript: var, let, const 差異
reference:[JS學徒特訓班] JavaScript ES6 : var, let, const 差異

3.如何接收來自Http的請求、函式解釋。
reference:IT邦幫忙 Day21 AJAX(1): 科普 & XHR
reference:【JavaScript瀏覽器】：實作串接 API

Run React

npm start

(前端之Browser view)
會發現一樣沒出現資料阿!
別急對瀏覽器按下F12，找到Console按鈕，打開該物件內容

就會發現該筆Json資料，以鍵值對的方式呈現
(如果發現有錯誤訊息，請見文章最下方，補充2)

今天就學到這裡，後續會再往前端渲染畫面的方向學習，這樣畫面就會越來越漂亮
中間會再穿插一些後端製作API的文章，敬請期待

---

補充1 jQuery
筆者發現有另一寫法可以達到一樣的目的。
使用jQuery會更簡潔、直觀…

需要先安裝jQuery

npm install --save jquery

導入jQuery模組

import $ from 'jquery';

jQuery程式

$.ajax({
  url:"http://localhost:8000/user/3",
  type: "GET",
  success: function(result){
    console.log(result);
  },
  error: function(error){
    console.log(error)
  }
});

瀏覽器console內容顯示

---

補充2 XMLHttpRequest Access Failed

網路上有個同源政策 Same-Origin Policy
解法其實有很多種，其中一解法目的為讓前後端的網址為一同源
(筆者自己是在Python後端應用CORS(Cross-Origin Resource Sharing)套件即解決)
reference:【Web】徹底理解同源政策（Same Origin Policy）
reference:[教學] CORS 是什麼? 如何設定 CORS?
這兩篇其實講的很詳細，值得一讀喔!

感謝您的收看~