在現代的Web開發中,經常需要從服務器獲取數據。其中一種常用的方式是使用Fetch API。Fetch API 是瀏覽器內置的一種獲取資源的方式,它可以發送 HTTP 請求并返回 HTTP 響應。這使得在使用 Fetch API 時,我們可以輕松地獲取 JSON 格式的數據。
Fetch API 提供了一個叫做fetch
的函數,用于發送 HTTP 請求并返回一個 Promise 對象。在 Promise 的回調函數中,我們可以使用json()
方法將返回的響應轉換為 JavaScript 對象。
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
在上面的代碼中,我們首先使用 fetch 函數發送一個跨域的 HTTP 請求(假設請求被允許),然后調用json()
方法將響應轉換為 JavaScript 對象。之后,我們打印了這個對象,或者在請求失敗時打印錯誤。
同時,我們還可以為 fetch 方法提供一個配置對象,以便設置請求的參數和頭部:
fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({id: 1})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
在這個例子中,我們將 HTTP 請求配置為使用 POST 方法,并傳遞了一個 JSON 對象到請求主體中。我們還設置了一個頭部信息來告訴服務器請求的數據類型是 JSON 格式。
在接收到響應后,我們又一次使用json()
方法將響應轉換為 JavaScript 對象,然后將結果打印出來。
正如我們所看到的,使用 Fetch API 可以輕松地獲取 JSON 數據。在大多數情況下,我們只需要向服務器發送一個 HTTP 請求,然后使用json()
方法將響應轉換為 JavaScript 對象即可。
下一篇vue 支付密碼組件