JavaScript 中的 HTTP GET 請求

Anika Tabassum Era 2023年1月30日 2022年5月5日
  1. 使用 XMLHttpRequest API 檢索 GET 請求
  2. 使用 fetch API 檢索 GET 請求
JavaScript 中的 HTTP GET 請求

在 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;
}

輸出:

使用 XMLHttpRequest API 檢索 GET 請求

使用 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'));

輸出:

使用 fetch API 檢索 GET 請求

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook