Fetch GET 請求中加入查詢字串

在探索Fetch API 的查詢字串功能時，開發人員的目標是使用類似jQuery 的$ 的方法將參數傳遞給GET 請求.ajax().

解決方案

新的Fetch API 使用URLSearchParams 來解決查詢字串新增。該物件提供了一種建構和修改查詢字串參數的便捷方法。

fetch('https://example.com?'   new URLSearchParams({
    foo: 'value',
    bar: 2,
}).toString())

URLSearchParams.toString() 方法將參數物件編碼為適當格式的查詢字串。

或者，您可以省略 .toString() 調用，如下所示當與字串連接時，JavaScript 會自動將非字串物件強制轉換為字串。請注意，這種方法需要對 JavaScript 有更深入的了解。

完整範例

這是一個有查詢參數的綜合範例：

async function doAsyncTask() {
  const url = (
    'https://jsonplaceholder.typicode.com/comments?'  
    new URLSearchParams({ postId: 1 }).toString()
  );

  const result = await fetch(url)
    .then(response => response.json());

  console.log('Fetched from: '   url);
  console.log(result);
}

doAsyncTask();