首頁 > web前端 > js教程 > 如何使用 Fetch API 發布 JSON 資料?

如何使用 Fetch API 發布 JSON 資料?

Mary-Kate Olsen
發布: 2024-12-11 02:57:14
原創
338 人瀏覽過

How Can I POST JSON Data Using the Fetch API?

使用 Fetch API 發布 JSON 資料

使用 POST 請求類型發送 JSON 資料是常見的做法。您可以使用 JavaScript 的 Fetch API 來完成此操作,它提供了用於發出 HTTP 請求的強大介面。

透過 Fetch API 發送 JSON 資料的一種方法是包含 JSON 物件作為請求正文。為此,請使用JSON.stringify() 將JSON 物件轉換為字串:

const body = JSON.stringify({a: 1, b: 2});
登入後複製

然後,將此字串化物件附加到請求正文:

fetch("/echo/json/", {
    method: "POST",
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: body
})
.then(res => console.log(res))
.catch(res => console.log(res));
登入後複製

但是,這方法在某些情況下可能不起作用,特別是在使用jsfiddle 的JSON echo 等開發工具時。或者,您可以使用 ES2017 async/await 語法來處理 JSON 負載:

(async () => {
  const rawResponse = await fetch('https://httpbin.org/post', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({a: 1, b: 'Textual content'})
  });
  const content = await rawResponse.json();

  console.log(content);
})();
登入後複製

此方法將回應轉換為 JSON 對象,可以在程式碼中更有效地查詢和處理該物件。

以上是如何使用 Fetch API 發布 JSON 資料?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板