我有一個網頁，允許用戶上傳和處理特定檔案。用戶上傳一些檔案后，單擊“處理”按鈕后，ajax 呼叫將發送到后端服務。在 beforeSend 函式中，有一個覆寫應用于螢屏并顯示一個微調器。當成功函式被觸發時，覆寫層將被移除并顯示一個 Toast 通知，如“檔案已處理！” 我的目標是根據后端服務中的特定檢查點以某種方式顯示每個檔案的進度狀態。假設后端服務在呼叫時執行以下任務：決議檔案、映射到特定格式、將資料發送到資料庫 A....最后它發送回 http 狀態 200 和一個 JSON 之類的
{
"status":"Success",
"message": "File X was processed"
}
現在我想要的是，在觸發成功事件之前，不只是獲取覆寫層并禁用整個頁面，而是根據后端到達的確切步驟為每個檔案更新進度條。
例如，對于檔案 A，我希望看到以下轉換：5% 決議檔案，10% 映射檔案...90% 將資料發送到資料庫，100% 處理。
這是可以實作的嗎？
uj5u.com熱心網友回復：
有幾點是你需要研究的。
通常在生產代碼中，我們需要超時。如果您對后端 API 進行 ajax 呼叫，則會有與該 API 呼叫相關的超時。假設如果超時超過 2 分鐘，那么它會向您發送 504 網關超時錯誤。
為了克服這個問題并實作您想要的功能，您可以擁有任何資料庫（讓我們考慮 SQL 服務器）。在您的 SQL 服務器中，創建一個表：Process_Table 使用架構：Process_id（將存盤行程 ID/名稱）百分比（將存盤百分比） At_step（決議、映射、發送到資料庫等）
使用 Javascript（或您選擇的任何框架），使用 setInterval() 進行 check_process() api 呼叫。對于check_proceess，您可以傳入process_id，并對照資料庫進行檢查。對于間隔，您可以將其設定為 5 秒。這樣每 5 秒就會進行一次呼叫。
您可以讀取這些 API 呼叫的回應并進行處理。
uj5u.com熱心網友回復：
HTTP 請求由請求和回應組成。除了事件之外，onprogress沒有直接的方法可以獲取狀態更新，這可以讓您查看已傳輸的資料量。這對于確定已發送到服務器的資料量很有用，但對于服務器處理該資料的程度而言，這非常有用。
您可以將進度存盤在資料庫中并輪詢 Web 服務以讀取最新狀態。
您還可以使用Websockets進行雙向通信，讓服務器將更新推送到客戶端 。
這種系統的粗略輪廓可能如下所示：
- 打開一個 Websocket
- 使用 Ajax 發送檔案
- 在 HTTP 回應中獲取服務器生成的 ID
- 注意來自 Websocket 的提及該 ID 的訊息
您還可以考慮通過 Websockets 完成整個事情（即也以這種方式上傳檔案）。一個快速的谷歌搜索出現了這個庫，用于將檔案上傳到托管在 Node.js 上的 Websocket 服務。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/387812.html
標籤：javascript 查询 前端