如何使用 JavaScript Fetch API 获取数据？-js教程-PHP中文网

使用 fetch() 方法

语法

示例 4

使用 axios npm 包

使用 XMLHttpRequest Web API

首页

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>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>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>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>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中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7480

CakePHP 教程

1377

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

如何创建和发布自己的JavaScript库？ Mar 18, 2025 pm 03:12 PM

文章讨论了创建，发布和维护JavaScript库，专注于计划，开发，测试，文档和促销策略。

如何在浏览器中优化JavaScript代码以进行性能？ Mar 18, 2025 pm 03:14 PM

本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

如何使用浏览器开发人员工具有效调试JavaScript代码？ Mar 18, 2025 pm 03:16 PM

本文讨论了使用浏览器开发人员工具的有效JavaScript调试，专注于设置断点，使用控制台和分析性能。

如何使用源地图调试缩小JavaScript代码？ Mar 18, 2025 pm 03:17 PM

本文说明了如何使用源地图通过将其映射回原始代码来调试JAVASCRIPT。它讨论了启用源地图，设置断点以及使用Chrome DevTools和WebPack之类的工具。

如何有效地使用Java的收藏框架？ Mar 13, 2025 pm 12:28 PM

本文探讨了Java收藏框架的有效使用。它强调根据数据结构，性能需求和线程安全选择适当的收集（列表，设置，地图，队列）。通过高效优化收集用法

初学者的打字稿，第2部分：基本数据类型 Mar 19, 2025 am 09:10 AM

掌握了入门级TypeScript教程后，您应该能够在支持TypeScript的IDE中编写自己的代码，并将其编译成JavaScript。本教程将深入探讨TypeScript中各种数据类型。 JavaScript拥有七种数据类型：Null、Undefined、Boolean、Number、String、Symbol（ES6引入）和Object。TypeScript在此基础上定义了更多类型，本教程将详细介绍所有这些类型。 Null数据类型与JavaScript一样，TypeScript中的null

开始使用Chart.js：PIE，DONUT和BUBBLE图表 Mar 15, 2025 am 09:19 AM

本教程将介绍如何使用 Chart.js 创建饼图、环形图和气泡图。此前，我们已学习了 Chart.js 的四种图表类型：折线图和条形图（教程二），以及雷达图和极地区域图（教程三）。创建饼图和环形图饼图和环形图非常适合展示某个整体被划分为不同部分的比例。例如，可以使用饼图展示野生动物园中雄狮、雌狮和幼狮的百分比，或不同候选人在选举中获得的投票百分比。饼图仅适用于比较单个参数或数据集。需要注意的是，饼图无法绘制值为零的实体，因为饼图中扇形的角度取决于数据点的数值大小。这意味着任何占比为零的实体

See all articles

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

使用 fetch() 方法

语法

示例 1

使用 axios npm 包

语法

示例 2

示例 3

使用 XMLHttpRequest Web API

语法

示例 4

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题