異步GET請求與條件化結果處理
本文探討如何在編程中提前執行GET請求，并在滿足特定條件后處理其結果。 這在需要響應用戶交互（例如鼠標懸停事件）并依賴網絡請求結果的場景中非常實用。 單純使用延時等待請求完成并非最佳方案，因為它會影響用戶體驗。
以下方案利用異步請求特性，避免了不必要的延時等待。
首先，我們使用GM_xmlhttpRequest (Greasemonkey/Tampermonkey) 執行GET請求。 為了清晰起見，我們用一個更具描述性的函數名替換了原代碼中的getwebsite。
let requestURL = 'http://aaa.com'; let extractedLink = null; // 用于存儲提取到的鏈接 let requestFinished = false; // 請求完成標志 function fetchAndExtractLink() { GM_xmlhttpRequest({ method: 'GET', url: requestURL, onload: function(response) { if (response.status === 200) { const parser = new DOMParser(); const doc = parser.parseFromString(response.responseText, 'text/html'); const linkElement = doc.querySelector('.item > a'); extractedLink = linkElement ? linkElement.href : null; } else { console.error('GET request failed with status:', response.status); } requestFinished = true; // 設置請求完成標志 }, onerror: function(error) { console.error('GET request error:', error); requestFinished = true; // 即使出錯也要設置完成標志 } }); } fetchAndExtractLink();
這段代碼執行GET請求，并從響應中提取.item > a選擇器匹配的第一個鏈接。 關鍵在于requestFinished標志，它指示請求是否已完成（成功或失敗）。
接下來，在鼠標懸停事件處理函數中，我們檢查requestFinished標志：
// 假設'myElement'是需要監聽鼠標懸停的元素 document.getElementById('myElement').addEventListener('mouseover', function() { if (requestFinished) { if (extractedLink) { window.open(extractedLink); } else { console.log('No link found in the response.'); } } else { console.log('Request is still in progress.'); } });
這個事件監聽器在鼠標懸停到myElement上時觸發。 它檢查requestFinished，只有在請求完成且提取到鏈接后才會打開鏈接。 如果沒有提取到鏈接，則會輸出相應信息。 這避免了不必要的延時，并提供了更可靠的錯誤處理。
此方法通過異步操作和狀態標志，優雅地解決了在特定條件下處理GET請求結果的問題，提升了用戶體驗和代碼健壯性。 記住將’myElement’替換為實際元素的ID。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
