如何使用 JavaScript Fetch API 取得資料？-js教程-PHP中文網

首頁

web前端

js教程

如何使用 JavaScript Fetch API 取得資料？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 24, 2023 pm 05:13 PM

如何使用 JavaScript Fetch API 获取数据？

如今，JavaScript 對於編寫前端和後端程式碼非常有用。此外，它也是使用最廣泛的程式語言。

此外，我們在開發即時應用程式時需要從其他伺服器取得資料。我們可以使用 API（應用程式介面）從其他伺服器或資料庫取得資料。

在這裡，我們將學習使用JavaScript來取得資料的各種方法。

使用 fetch() 方法

fetch() 是瀏覽器從 API 取得資料的方法。它將 API URL 作為我們需要獲取資料的第一個參數，將選項作為第二個參數。這些選項可以包含標頭和身份驗證令牌。

文法

使用者可以使用下面的語法來fetch()來取得資料。

fetch(baseURL)
.then(data => {
   // use data here
}

在上面的語法中，baseURL是一個取得資料的API。

範例 1

在下面的範例中，當使用者點擊按鈕時，它會執行 fetchData() 函數。在 fetchData() 函數中，我們使用 fetch() 方法從 API 取得資料。之後，我們處理了回應和錯誤。使用者可以在輸出中看到我們從 API 取得的資料。

<html>
<body>
   <h2 id="Using-the-i-fetch-browser-method-i-to-fetch-data-from-API">Using the <i> fetch() browser method </i> to fetch data from API</h2>
   <div id = "output"> </div> 
   <button onclick = "fetchData()"> Fetch API to get data </button>
   <script>
      let output = document.getElementById('output');
      function fetchData() {
         fetch('https://dummyjson.com/products/1')
         .then(response => response.json())
         .then(data => {
            output.innerHTML += "id = " + data.id + "<br/>";
            output.innerHTML += "brand = " + data.brand + "<br/>";
            output.innerHTML += "category = " + data.category + "<br/>";
            output.innerHTML += "price = " + data.price + "<br/>";
            output.innerHTML += "rating = " + data.rating + "<br/>";
            output.innerHTML += "stock = " + data.stock + "<br/>";
         })
      }
   </script>
</body>
</html>

使用 axios npm 套件

axios 是一個 NPM 套件，允許開發人員透過發出 GET、POST、PUT 等請求與 API 進行互動。這裡，我們將使用 axios 發出 GET 請求來取得 JavaScript 中的資料。

文法

使用者可以依照下面的語法使用axios從API取得資料。

axios.get(URL)
.then((response) => {
   // use response
}

在上面的語法中，我們使用了 axios.get() 方法從 API 取得資料。

範例 2

在此範例中，我們使用從伺服器或資料庫取得的 then() 和 catch() 區塊來解析 Promise。我們利用了 then() 區塊中的資料和 catch() 區塊中的錯誤。

<html>
<head>
   <script src ="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js"></script>
</head>
<body>
   <h2 id="Using-the-i-Axios-NPM-package-i-to-fetch-data-from-API">Using the <i> Axios NPM package </i> to fetch data from API</h2>
   <div id = "output"> </div>
   <button onclick = "fetchData()"> Fetch data using Axios </button>
   <script>
      let output = document.getElementById('output');
      function fetchData() {
         axios.get("https://jsonplaceholder.typicode.com/todos/1") 
         .then((response) => {
            output.innerHTML += "userId : " + response.data.userId + "<br/>";
            output.innerHTML += "id : " + response.data.id + "<br/>";
            output.innerHTML += "title : " + response.data.title + "<br/>";
            output.innerHTML += "completed : " + response.data.completed + "<br/>";
         })
         .catch((err) => {
            output.innerHTML += "The error is - " + err + "<br/>";
         })
      }
   </script>
</body>
</html>

範例 3

在下面的範例中，我們使用 axios 透過 async/await 語法來取得資料。我們已將 getData() 函數設為非同步。此外，我們在 axios 中使用了await關鍵字來暫停函數的執行，直到我們從API中獲得回應。

<html>
<head>
   <script src ="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js"></script>
</head>
<body>
   <h2 id="Using-the-i-Axios-NPM-package-i-with-Async-await-syntax-to-fetch-data-from-API">Using the <i> Axios NPM package </i> with Async/await syntax to fetch data from API</h2>
   <div id = "output"> </div>
   <button onclick = "getData()"> get data using Axios </button>
   <script>
      let output = document.getElementById('output');
      async function getData() {
         let response = await
         axios.get("https://jsonplaceholder.typicode.com/todos/1")
         for (let key in response.data) {
            output.innerHTML += key + " - " + response.data[key] + "<br/>";
         }
      }
   </script>
</body>
</html>

使用 XMLHttpRequest Web API

##XMLHttpRequest Web API 允許我們建立模組來取得資料。我們可以建立一個物件並使用 XMLHttpRequest 對其進行初始化。之後，我們可以使用該物件來開啟 GET 請求。

之後，我們可以在 XMLHttpRequest 載入時呼叫回呼函數。回調函數可以獲取響應狀態並相應地返回響應或錯誤。

文法

const xmlRequest = new XMLHttpRequest();
xmlRequest.open('GET', apiURL);
xmlRequest.responseType = 'json';
xmlRequest.onload = function () {
   // handle the response from API
}
xmlRequest.send();

在上面的語法中，我們首先使用 open() 方法開啟請求，然後使用 onload 事件處理來自 API 的回應。

範例 4

在下面的範例中，我們必須使用 XMLHttpRequest() Web API 建立自訂模組以從 API 取得資料。 customRequest() 函數包含自訂模組。

之後，我們透過將 URL 作為參數傳遞來呼叫 customRequest() 函數，並使用 then() 區塊來解析從 customRequest() 函數傳回的 Promise。

<html>
<body>
   <h2 id="Using-the-i-XMLHttpRequest-web-API-i-to-fetch-data-from-API">Using the <i> XMLHttpRequest web API </i> to fetch data from API</h2>
   <div id = "output"> </div>
   <button onclick = "getData()"> get data </button>
   <script>
      let output = document.getElementById('output');
      const customRequest = (apiURL) => {
         return new Promise((res, rej) => {
      
            // Create a new Object of XMLHttpRequest
            const xmlRequest = new XMLHttpRequest();
            
            // open a get request
            xmlRequest.open('GET', apiURL);
            
            // set response type
            xmlRequest.responseType = 'json';
            xmlRequest.onload = function () {
               // resolve the promise when we get a successful response
               if (xmlRequest.status == 200) {
                  res(xmlRequest.response);
               } else {
                  
                  // reject promise on error
                  rej(xmlRequest.response);
               }
            };
            
            // send request
            xmlRequest.send();
         }); 
      };
      
      // making the get request from URL
      const getData = async () => {
         try {
            const data = await customRequest(
               'https://dummyjson.com/products/1',
            );
            output.innerHTML += "category = " + data.category + "<br/>";
            output.innerHTML += "price = " + data.price + "<br/>";
            output.innerHTML += "rating = " + data.rating + "<br/>";
            output.innerHTML += "stock = " + data.stock + "<br/>";
         } catch (err) {
            output.innerHTML += "The error is : " + err + "<br/>";
         }
      };
   </script>
</body>
</html>

我們學習了從 API 取得資料的三種不同方法。最好的方法是使用 fetch() 瀏覽器的方法，因為我們不需要安裝任何模組來使用它。此外，使用者應該使用帶有 async/await 語法的所有模組。

以上是如何使用 JavaScript Fetch API 取得資料？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr