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

现在，JavaScript对于编写前端和后端代码都很有用。同时，它也是使用最广泛的编程语言。

此外，在开发实时应用程序时，我们需要从其他服务器获取数据。我们可以使用API从其他服务器或数据库获取数据，API代表应用编程接口。

在这里，我们将学习各种获取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()块来解决承诺。我们在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以异步/等待的语法来获取数据。我们使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网络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()网络API来创建一个自定义模块，从API中获取数据。customRequest()函数包含了自定义模块。

之后，我们通过传递URL作为参数来调用customRequest()函数，并使用then()块来解析从customRequest()函数返回的承诺。

<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>