JavaScript 中的 HTTP GET 請求
Anika Tabassum Era
2024年2月15日
JavaScript
JavaScript HTTP
在 JavaScript 中，我們通常使用 XMLHttpRequest API 通過其方法在 Web 伺服器和瀏覽器之間傳輸資料。最近，該樓層已歸 Fetch API 所有，因為它易於實現並啟用了 Promise。
此外，Fetch 約定支援 ES6 更新和修改。
在這裡，我們將演示僅使用 XMLHttpRequest API 物件和 Fetch API 從伺服器獲取 HTTP GET 請求 到 Web 瀏覽器的例項。
使用 XMLHttpRequest API 檢索 GET 請求
使用 XMLHttpRequest API，我們將初始化一個名為 xmlhr 的物件並啟動此 API 可用的其他方法。
首先，我們將使用 open 方法從伺服器設定 GET 以及 URL。
此外，我們將在 open 方法中看到一個 false 引數，該引數用於同步請求的情況下 true in the case of asynchronous requests。
程式碼片段：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<button onclick="httpGet('https://jsonplaceholder.typicode.com/todos/1')">Get</button>
<p id="get"></p>
</body>
</html>
function httpGet(theUrl) {
var xmlhr = new XMLHttpRequest();
xmlhr.open('GET', theUrl, false);
xmlhr.send(null);
document.getElementById('get').innerHTML = xmlhr.responseText;
return xmlhr.responseText;
}
輸出：
使用 fetch API 檢索 GET 請求
如果你正在尋找一種簡單且效能更好的方法來從伺服器中提取資料，那麼 fetch API 使該過程非常方便。
正如你將在示例中看到的，此 API 的命令更具可預測性，並且易於跟蹤工作方法。最初，你將獲取 URL，然後檢測資料型別。
稍後我們將提取資料並檢查是否有任何錯誤可用。最後，如果沒有錯誤，輸出將在控制檯面板中預覽。讓我們檢查一下程式碼以獲得正確的理解。
程式碼片段：
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then((r) => r.json())
.then((data) => console.log(data))
.catch((e) => console.log('error'));
輸出：
Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe
