fetch-- 與 JSON 的碰撞

JSON 是一種結構化數據的簡單格式，下面是一個包含帶有 props 和 values 的對象的 JSON 示例：

{
  "name": "公衆號",
  "id": "FedJavaScript",
  "isVillain": true,
  "friends": []
}

在這篇文章中，將介紹如何使用 fetch() API get 和 post JSON 數據。

1. 調用 fetch()

Fetch API 提供了一個 JavaScript 接口，用於訪問和操縱 HTTP 管道的一些具體部分，例如請求和響應。它還提供了一個全局 fetch() 方法，該方法提供了一種簡單，合理的方式來跨網絡異步獲取資源。

這種功能以前是使用 XMLHttpRequest 實現的。Fetch 提供了一個更理想的替代方案，可以很容易地被其他技術使用，例如 Service Workers (en-US)。Fetch 還提供了專門的邏輯空間來定義其他與 HTTP 相關的概念，例如 CORS 和 HTTP 的擴展。

fetch() 接受 2 個參數，一個基本的 fetch 請求設置起來很簡單。看看下面的代碼：

fetch('https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzAwNjI5MTYyMw==')

可選的第二個參數，用於配置請求，例如：

{
  method:'POST',
  body: JSON.stringify(data),
  headers: {
    'content-type': 'application/json'
  }
}

2.GET JSON

讓我們從路徑中獲取 / api/namesJSON 格式的人員列表：

async function loadNames() {
  const response = await fetch('/api/names');
  const names = await response.json();

  console.log(names); 
  // logs [{ name: 'Joker'}, { name: 'Batman' }]
}

loadNames();

await fetch('/api/names') 啓動一個 GET 請求，並在請求完成時評估響應對象。

然後，從服務器響應中，您可以使用 await response.json() 將 JSON 解析爲純 JavaScript 對象。

默認情況下 fetch() 執行 GET 請求。但是您始終可以明確指出 HTTP 方法：

// ...
const response = await fetch('/api/names', {
  method: 'GET'
});
// ...
顯示 GET JSON

某些 API 服務器可能使用多種格式：JSON、XML 等。這就是這些服務器可能要求您指明發布數據的格式的原因。

爲此，需要使用 headers 選項，將 Accept 標頭設置 application/json 以顯式請求 JSON：

// ...
const response = await fetch('/api/names', {
  headers: {
    'Accept': 'application/json'
  }
});
// ...

3. POST JSON

async function postName() {
  const object = { name: 'James Gordon' };
  const response = await fetch('/api/names', {
    method: 'POST',
    body: JSON.stringify(object)
  });

  const responseText = await response.text();
  console.log(responseText); // logs 'OK'
}

postName();

這種方法適用於執行 POST, 及 PUT 或 PATCH 請求。

3.1 顯式 POST JSON

同顯示 GET JSON 一樣，指明 headers：

// ...
const object = { name: 'James Gordon' };

const response = await fetch('/api/names', {
  method: 'POST',
  body: JSON.stringify(object),
  headers: {
    'Content-Type': 'application/json'
  }
});
// ...

4. 尾聲

如果要在不支持的瀏覽器中使用 Fetch，可以使用 Fetch Polyfill。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/bq3egjPRTQnM4HJfrER0cQ

猜你喜歡