JavaScript 如何使用Fetch API获取数据

这里的任务是展示如何使用Fetch API从API获取数据。我将以一个包含员工详细信息的虚拟API为例，并从该API中展示如何使用fetch() API方法来获取数据。

JavaScript fetch()方法 ： fetch()方法是现代且多功能的，被现代浏览器广泛支持。它可以向服务器发送网络请求，在需要时加载新信息，而无需重新加载浏览器。

语法： fetch()方法只有一个必需参数，即您希望获取的资源的URL 。

let response = fetch(api_url, [other params])

JavaScript的异步等待 ：在这个示例中，我们将使用 异步等待方法 与 fetch()方法 以更简洁的方式创建Promise。异步函数在所有现代浏览器中都得到支持。

语法：

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
}

先决条件: 在这里，您需要一个用于执行 fetch() 操作以从API获取数据的API。您还可以创建一个API或使用免费的模拟API。
我使用的API是: 这个API包含以 键：值 对的形式的雇员详细信息。 https://employeedetails.free.beeceptor.com/my/api/path

方法: 首先制作必要的JavaScript文件、HTML文件和CSS文件。然后将 API URL 存储在一个变量中（这里是api_url）。定义一个 异步函数 （这里是getapi()）并将api_url传递给该函数。定义一个常量response并使用 await fetch() 方法存储获取的数据。定义一个常量data并使用 await response.json() 方法以JSON形式存储数据。现在，我们通过fetch()方法将数据从API中得到，并存储在data变量中。将这个data变量传递给展示提取数据的函数。

函数 show 接收data变量，并通过在data.list上应用for循环而获取所有行来显示数据，它将所有数据存储到tab变量中，并为HTML文件中的 employees 类设置innerHTML属性。我还添加了一个加载器，直到有响应返回才加载。

JavaScript文件:

// api url
const api_url = 
      "https://employeedetails.free.beeceptor.com/my/api/path";
 
// Defining async function
async function getapi(url) {
   
    // Storing response
    const response = await fetch(url);
   
    // Storing data in form of JSON
    var data = await response.json();
    console.log(data);
    if (response) {
        hideloader();
    }
    show(data);
}
// Calling that async function
getapi(api_url);
 
// Function to hide the loader
function hideloader() {
    document.getElementById('loading').style.display = 'none';
}
// Function to define innerHTML for HTML table
function show(data) {
    let tab = 
        `<tr>
          <th>Name</th>
          <th>Office</th>
          <th>Position</th>
          <th>Salary</th>
         </tr>`;
   
    // Loop to access all rows 
    for (let r of data.list) {
        tab += `<tr> 
    <td> ${r.name} </td> <td>$ {r.office}</td>
    <td> ${r.position}</td> <td>$ {r.salary}</td>          
</tr>`;
    }
    // Setting innerHTML as tab variable
    document.getElementById("employees").innerHTML = tab;
}

HTML文件：

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="script.js"></script>
        <link rel="stylesheet" href="style.css" />
        <meta charset="UTF-8" />
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <!-- Here a loader is created which 
             loads till response comes -->
        <div class="d-flex justify-content-center">
            <div class="spinner-border"
                 role="status" id="loading">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
        <h1>Registered Employees</h1>
        <!-- table for showing data -->
        <table id="employees"></table>
    </body>
</html>

输出：

在控制台中，JSON数据的外观如下。

JavaScript 如何使用Fetch API获取数据