如何使用 Fetch API 將查詢字串參數附加到 GET 請求？

使用Fetch API 在GET 請求中進行查詢字串操作

在現代Web 開發中，Fetch API 提供了一種用於發出HTTP 請求的強大機制。一個常見場景涉及發送帶有查詢字串的 GET 請求。然而，加入查詢字串參數的語意與流行的 jQuery $.ajax() 方法不同。

問題：

如何將查詢字串加入到使用 Fetch API 取得 GET 請求？例如，考慮以下 URL：

http://myapi.com/orders?order_id=1

答案：

Fetch API 提供了兩種用於附加查詢字串參數的主要方法：URLSearchParams 和 URL。

使用 URLSearchParams：

URLSearchParams 允許操作 URL 查詢字串。它提供了一個用於新增、刪除和查詢參數的直覺式介面。要建構查詢字串，請建立一個URLSearchParams 實例，加入所需的參數，並將其轉換為字串：

// Using URLSearchParams
var request = new Request({
  url: 'http://myapi.com/orders',
  method: 'GET'
});
var params = new URLSearchParams();
params.append('order_id', 1);
request.url += '?' + params.toString();

使用URL：

或者， URL 類別可用於直接操作URL。它提供了添加和檢索參數的方法：

// Using URL
var request = new Request({
  url: new URL('http://myapi.com/orders'),
  method: 'GET'
});
request.url.searchParams.append('order_id', 1);

深入示例：

考慮以下場景：從 RESTful API 上的特定帖子中獲取評論。以下是使用URLSearchParams 方法的完整範例：

// Fetch comments for a specific post using URLSearchParams
async function fetchComments() {
  const postId = 1;
  const url = 'https://jsonplaceholder.typicode.com/comments?' +
    new URLSearchParams({ postId }).toString();
  const response = await fetch(url);
  const comments = await response.json();
  console.log(comments);
}

fetchComments();

透過利用這些技術，開發人員可以有效地將查詢字串新增至使用Fetch API 發出的GET 請求中，從而使他們能夠將其他參數傳遞到伺服器端端點，檢索過濾結果。

以上是如何使用 Fetch API 將查詢字串參數附加到 GET 請求？的詳細內容。更多資訊請關注PHP中文網其他相關文章！