iT邦幫忙

2026 iThome 鐵人賽

DAY 20
0
AI Engineering

30 天從資料處理、分析到生成式 AI 的整合應用與實作學習系列 第 20 篇

Fetch API:從 Frontend 發出 HTTP Request

  • 分享至 

  • xImage
  •  

昨天先建立了一個簡單的 Frontend,讓使用者可以在 Browser 的輸入框輸入問題,也利用 JavaScript 取得輸入的內容。但分析結果其實還是利用 setTimeout() 模擬的,資料並沒有傳進原本的 Java。所以今天想了解 Browser 取得使用者的問題之後,到底要怎麼把它傳給 Java?

Browser 到 Server 的資料怎麼傳?

在這個過程中 Request 是 Client 向 Server 發出的請求,而 Response 則是 Server 處理完成後回傳的結果。當使用者輸入問題後,Browser 需要送出的 Request 大概包含:

  • URL:資料要傳到哪裡,例如 /api/chat
  • Method:使用的 POST
  • Header:利用 Content-Type: application/json 告訴 Server 傳送的資料是 JSON
  • Body:真正要傳送的問題,例如 {"query":"我最近平均睡幾個小時?"}
    Java 收到 Request 後會取得問題,再交給分析程式處理,最後再利用 HTTP Response 把結果傳回 Browser。

Fetch API

可以透過 fetch() 設定 Request 要傳送的位置、使用的 Method、Header 和 Body 。讓 JavaScript 發出 HTTP Request。
https://ithelp.ithome.com.tw/upload/images/20261003/20184235Ae82h3qn9S.png
JSON.stringify({ query: userQuery }) 會轉成 JSON 字串放進 Request Body,再傳送給 Java。
由此可知, JSON 除了可以解析 Gemini API 的 Response 之外,也是 Frontend 和 Backend 之間交換資料時使用的格式。而 Java 在這個過程中會變成 Server ,之前在使用 Gemini API 時,基本上都是 Java 主動把 Request 傳給 Gemini。現在則是反過來,變成 Java 等待 Browser 傳來的 Request。

發出 Request 後呢?

HTTP Request 發出去後,Server 不一定會立刻回傳結果,因此 fetch() 不會直接得到最後的資料,而是會回傳一個 Promise。
https://ithelp.ithome.com.tw/upload/images/20261003/20184235XeQCwUiwMf.png
所以在 fetch() 後面可以用 .then()設定等結果傳回來後要做什麼。像是把 Server 回傳的 JSON 解析出來。
以及如果 Request 過程發生錯誤,利用.catch()處理錯誤。


上一篇
認識 Web Frontend,網頁是怎麼運作的?
下一篇
HttpServer:Frontend 和 Backend 怎麼連起來?
系列文
30 天從資料處理、分析到生成式 AI 的整合應用與實作學習 共 26 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言