JavaScript 中的 HTTP GET 請求
Anika Tabassum Era
2023年1月30日
2022年5月5日
在 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'));
輸出:
Author: Anika Tabassum Era