一、背景場景
在某類生成任務中，例如用戶點擊“執行任務”按鈕后觸發一個較耗時的后端操作（如生成報告、渲染圖像、轉碼視頻等），由于其調用了模型、渲染服務或需要較長處理時間，為了防止接口被頻繁惡意調用，系統需要加入風控驗證機制。
此外，因任務處理為異步，前端無法立即獲得最終結果，因此需通過輪詢方式定期查詢任務狀態，等待任務完成后展示結果。
二、整體流程說明
1. 用戶點擊“執行任務”按鈕：
- 前端調用風控接口
/api/risk/check - 若命中頻控規則，彈出驗證碼組件（如滑塊驗證）
- 驗證通過后繼續發起任務請求
- 驗證失敗提示用戶，保留輸入內容并刷新驗證組件
2. 驗證通過后：
- 前端調用
/api/startTask發起異步任務 - 后端返回任務ID
taskId - 前端開啟輪詢，請求
/api/task/status?taskId=xxx - 當輪詢返回
done，展示結果或跳轉
三、技術方案模塊拆解
1. 風控接口 /api/risk/check
- 用于檢查當前用戶/IP 是否觸發頻控策略
- 返回：是否需要驗證、verifyToken（如需）
2. 驗證模塊
- 接入驗證服務（滑塊、人機驗證）
- 驗證成功后自動觸發原始任務邏輯
- 驗證失敗刷新組件并提示用戶
3. 任務發起接口 /api/startTask
- 發起耗時任務并返回 taskId
- 可附帶驗證 token（若有）
4. 輪詢接口 /api/task/status?taskId=xxx
- 查詢任務狀態
- 典型狀態值：
pending,done,failed - 建議每 2-3 秒輪詢一次，限制最大輪詢時長/次數
四、前端核心邏輯示意
async function handleExecute() {const riskRes = await fetch('/api/risk/check');if (riskRes.needVerify) {openVerifyModal(riskRes.verifyToken);} else {await startAndPollTask();}
}async function onVerifySuccess(verifyToken) {await startAndPollTask(verifyToken);
}async function startAndPollTask(verifyToken?) {const { taskId } = await fetch('/api/startTask', { body: { verifyToken } });const timer = setInterval(async () => {const res = await fetch(`/api/task/status?taskId=${taskId}`);if (res.status === 'done') {clearInterval(timer);renderResult(res.result);}}, 3000);
}
五、總結
| 階段 | 是否需要輪詢 | 原因 |
|---|---|---|
| 風控驗證 | ? 不需要 | 驗證同步完成 |
| 異步任務處理 | ? 需要 | 后端處理耗時，需等待任務完成 |
驗證通過后只需繼續執行原來的任務邏輯；輪詢是異步任務必要的狀態確認機制，不是風控邏輯的一部分。
該方案可復用于所有“異步任務 + 防濫用風控 + 前端輪詢確認”的場景，如：內容生成、文件上傳處理、智能翻譯、AI摘要、渲染轉碼等任務鏈。
