當你需要快速回應使用者操作並從後端取得最新資料時,你可能需要一個支援順序請求的 React Hook。如果先前的請求仍在進行,則此掛鉤可以取消它們,並且僅返回最新的資料。這不僅提高了效能,還增強了使用者體驗。
讓我們從建立一個簡單的順序請求 React hook 開始:
import { useCallback, useRef } from 'react'; const buildCancelableFetch = <T>( requestFn: (signal: AbortSignal) => Promise<T>, ) => { const abortController = new AbortController(); return { run: () => new Promise<T>((resolve, reject) => { if (abortController.signal.aborted) { reject(new Error('CanceledError')); return; } requestFn(abortController.signal).then(resolve, reject); }), cancel: () => { abortController.abort(); }, }; }; function useLatest<T>(value: T) { const ref = useRef(value); ref.current = value; return ref; } export function useSequentialRequest<T>( requestFn: (signal: AbortSignal) => Promise<T>, ) { const requestFnRef = useLatest(requestFn); const currentRequest = useRef<{ cancel: () => void } | null>(null); return useCallback(async () => { if (currentRequest.current) { currentRequest.current.cancel(); } const { run, cancel } = buildCancelableFetch(requestFnRef.current); currentRequest.current = { cancel }; return run().finally(() => { if (currentRequest.current?.cancel === cancel) { currentRequest.current = null; } }); }, [requestFnRef]); }
這裡的關鍵想法來自文章「如何在 JavaScript 中取消 Promises」。你可以這樣使用它:
import { useSequentialRequest } from './useSequentialRequest'; export function App() { const run = useSequentialRequest((signal: AbortSignal) => fetch('http://localhost:5000', { signal }).then((res) => res.text()), ); return <button onClick={run}>Run</button>; }
這樣,當您多次快速點擊按鈕時,您只會獲取最新請求的數據,先前的請求將被丟棄。
如果我們需要更全面的順序請求React Hook,上面的程式碼還有改進的空間。例如:
我們可以推遲創建 AbortController 直到真正需要它,從而減少不必要的創建成本。
我們可以使用泛型來支援任何類型的請求參數。
這是更新版本:
import { useCallback, useRef } from 'react'; function useLatest<T>(value: T) { const ref = useRef(value); ref.current = value; return ref; } export function useSequentialRequest<Args extends unknown[], Data>( requestFn: (signal: AbortSignal, ...args: Args) => Promise<Data>, ) { const requestFnRef = useLatest(requestFn); const running = useRef(false); const abortController = useRef<AbortController | null>(null); return useCallback( async (...args: Args) => { if (running.current) { abortController.current?.abort(); abortController.current = null; } running.current = true; const controller = abortController.current ?? new AbortController(); abortController.current = controller; return requestFnRef.current(controller.signal, ...args).finally(() => { if (controller === abortController.current) { running.current = false; } }); }, [requestFnRef], ); }
請注意,在finally區塊中,我們檢查目前控制器是否等於abortController.current以防止競爭條件。這可確保只有活動請求才能修改運行狀態。
更全面的用法:
import { useState } from 'react'; import { useSequentialRequest } from './useSequentialRequest'; export default function Home() { const [data, setData] = useState(''); const run = useSequentialRequest(async (signal: AbortSignal, query: string) => fetch(`/api/hello?query=${query}`, { signal }).then((res) => res.text()), ); const handleInput = async (queryStr: string) => { try { const res = await run(queryStr); setData(res); } catch { // ignore errors } }; return ( <> <input placeholder="Please input" onChange={(e) => { handleInput(e.target.value); }} /> <div>Response Data: {data}</div> </> ); }
您可以在線上嘗試:當您快速輸入時,先前的請求將被取消,只顯示最新的回應。
如果您發現這有幫助, 請考慮訂閱 我的時事通訊,以獲取有關Web 開發的更多有用文章和工具。感謝您的閱讀!
以上是如何建構處理順序請求的 React Hook的詳細內容。更多資訊請關注PHP中文網其他相關文章!