如何使用 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刪除

在JavaScript中替換字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替換方法詳解及常見問題解答本文將探討兩種在JavaScript中替換字符串字符的方法：在JavaScript代碼內部替換和在網頁HTML內部替換。在JavaScript代碼內部替換字符串最直接的方法是使用replace()方法： str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項，需使用正則表達式並添加全局標誌g： str = str.replace(/fi

構建您自己的Ajax Web應用程序Mar 09, 2025 am 12:11 AM

因此，在這裡，您準備好了解所有稱為Ajax的東西。但是，到底是什麼？ AJAX一詞是指用於創建動態，交互式Web內容的一系列寬鬆的技術。 Ajax一詞，最初由Jesse J創造

10個JQuery Fun and Games插件Mar 08, 2025 am 12:42 AM

10款趣味橫生的jQuery遊戲插件，讓您的網站更具吸引力，提升用戶粘性！雖然Flash仍然是開發休閒網頁遊戲的最佳軟件，但jQuery也能創造出令人驚喜的效果，雖然無法與純動作Flash遊戲媲美，但在某些情況下，您也能在瀏覽器中獲得意想不到的樂趣。 jQuery井字棋遊戲遊戲編程的“Hello world”，現在有了jQuery版本。源碼 jQuery瘋狂填詞遊戲這是一個填空遊戲，由於不知道單詞的上下文，可能會產生一些古怪的結果。源碼 jQuery掃雷遊戲

jQuery視差教程 - 動畫標題背景Mar 08, 2025 am 12:39 AM

本教程演示瞭如何使用jQuery創建迷人的視差背景效果。我們將構建一個帶有分層圖像的標題橫幅，從而創造出令人驚嘆的視覺深度。更新的插件可與JQuery 1.6.4及更高版本一起使用。下載

如何創建和發布自己的JavaScript庫？Mar 18, 2025 pm 03:12 PM

文章討論了創建，發布和維護JavaScript庫，專注於計劃，開發，測試，文檔和促銷策略。

如何在瀏覽器中優化JavaScript代碼以進行性能？Mar 18, 2025 pm 03:14 PM

本文討論了在瀏覽器中優化JavaScript性能的策略，重點是減少執行時間並最大程度地減少對頁面負載速度的影響。

使用jQuery和Ajax自動刷新DIV內容Mar 08, 2025 am 12:58 AM

本文演示瞭如何使用jQuery和ajax自動每5秒自動刷新DIV的內容。該示例從RSS提要中獲取並顯示了最新的博客文章以及最後的刷新時間戳。加載圖像是選擇

Matter.js入門：簡介Mar 08, 2025 am 12:53 AM

Matter.js是一個用JavaScript編寫的2D剛體物理引擎。此庫可以幫助您輕鬆地在瀏覽器中模擬2D物理。它提供了許多功能，例如創建剛體並為其分配質量、面積或密度等物理屬性的能力。您還可以模擬不同類型的碰撞和力，例如重力摩擦力。 Matter.js支持所有主流瀏覽器。此外，它也適用於移動設備，因為它可以檢測觸摸並具有響應能力。所有這些功能都使其值得您投入時間學習如何使用該引擎，因為這樣您就可以輕鬆創建基於物理的2D遊戲或模擬。在本教程中，我將介紹此庫的基礎知識，包括其安裝和用法，並提供一

See all articles