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

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

fetch() 方法： fetch() 方法是现代且通用的，并且在现代浏览器中得到很好的支持。它可以向服务器发送网络请求并在需要时加载新信息，而无需重新加载浏览器。

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

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

Async Await：在这个例子中，我们将使用Async Await 方法和fetch() 方法以更简洁的方式做出 Promise。所有现代浏览器都支持异步函数。

• 句法：

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

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

方法：首先制作必要的JavaScript文件、HTML文件和CSS文件。然后将API URL存储在一个变量中（此处为 api_url）。定义一个异步函数（此处为 getapi()）并在该函数中传递 api_url。定义一个常量响应并通过await fetch()方法存储获取的数据。通过await response.json()方法定义一个常量数据并以 JSON 形式存储数据。现在我们通过数据变量中的 fetch() 方法从 API 获取数据。将此数据变量传递给将显示获取的数据的函数。函数show获取数据变量，并通过在data.list上应用 for 循环并获取所有要显示的行，它将所有数据存储到选项卡变量中，该变量为 HTML 文件中的员工类设置 innerHTML 属性。我还添加了一个加载器，它加载直到响应到来。

• JavaScript 文件：
  

  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 = 
          `
            Name
            Office
            Position
            Salary
           `;
      
      // Loop to access all rows 
      for (let r of data.list) {
          tab += ` 
      ${r.name} 
      ${r.office}
      ${r.position} 
      ${r.salary}          
  `;
      }
      // Setting innerHTML as tab variable
      document.getElementById("employees").innerHTML = tab;
  }

  
  
  
• HTML 文件：
  

  HTML

      
          
          
          
          
          Document
      
      
          
          
              
                  Loading...
              
          
          Registered Employees
          
          
      

输出：

• 在控制台中，JSON 中的数据将如下所示。
  
• HTML 输出。
  

JavaScript 以网页开发而闻名，但它也用于各种非浏览器环境。您可以按照这个 JavaScript 教程和 JavaScript 示例从头开始学习 JavaScript。