如何在JavaScript中调用API – 附带示例

如何在JavaScript中调用API -带示例

在JavaScript中调用API（应用程序编程接口）是Web开发人员需要掌握的基本操作。它允许您从外部源获取数据并将其集成到您的Web应用程序中。

在本教程中，我将逐步向您介绍如何在JavaScript中进行API调用的过程。通过本文的阅读，您将对如何在JavaScript项目中与API进行交互有着坚实的理解。

什么是API？

在深入了解JavaScript中调用API的技术细节之前，让我们从基础知识开始。API，或应用程序编程接口，就像是一个桥梁，允许两个不同的软件系统相互通信。它定义了一组用于请求和交换数据的规则和协议。

API可用于从外部源检索信息，向外部服务发送数据或执行各种其他操作。它们在Web开发中被广泛用于访问来自各种在线服务的数据，如社交媒体平台、天气数据、金融信息等。

如何选择API

调用API的第一步是选择适合您需求的API。有数不清的API可用，提供各种主题的数据。

一些常见的API类型包括：

RESTful API：这些API被广泛用于简单的数据检索和操作。它们使用标准的HTTP方法，如GET、POST、PUT和DELETE。
第三方API：许多在线服务提供API，允许您访问它们的数据，例如Twitter API用于推文或Google Maps API用于位置数据。
天气API：如果您需要天气数据，可以使用OpenWeatherMap或WeatherAPI等API。
金融API：要获取股票价格等金融数据，可以使用Alpha Vantage或Yahoo Finance等API。

在本指南中，我们将使用一个虚构的RESTful API作为示例，以保持简单。您可以将其替换为您选择的API。

如何使用Fetch API进行GET请求

要在JavaScript中进行API请求，可以使用内置在现代浏览器中的fetch API。它是基于Promise的API，可以轻松发送HTTP请求并异步处理响应。

以下是使用fetch进行GET请求的方法：

// 定义API URLconst apiUrl = 'https://api.example.com/data';// 发起GET请求fetch(apiUrl)  .then(response => {    if (!response.ok) {      throw new Error('网络响应错误');    }    return response.json();  })  .then(data => {    console.log(data);  })  .catch(error => {    console.error('错误:', error);  });

在上面的代码中：

我们定义了要调用的API URL。
我们使用fetch函数向API URL发起GET请求。该函数返回一个Promise。
.then()方法处理来自服务器的异步响应。
检查response.ok属性以确保响应有效。
我们使用response.json()方法解析JSON数据。
最后，我们将数据记录到控制台，或处理可能发生的任何错误。

如何处理响应

当您发起 API 调用时，服务器会以数据形式响应。如何处理这些数据取决于您应用的要求。在前面的例子中，我们只是将数据记录到控制台中。不过，您可以以多种方式处理数据，例如在网页上显示数据或将其存储在数据库中。

下面是一个修改后的例子，将 API 数据显示在一个 HTML 元素中：

const apiUrl = 'https://api.example.com/data';const outputElement = document.getElementById('output');fetch(apiUrl)  .then(response => {    if (!response.ok) {      throw new Error('网络响应不正常');    }    return response.json();  })  .then(data => {    // 在 HTML 元素中显示数据    outputElement.textContent = JSON.stringify(data, null, 2);  })  .catch(error => {    console.error('错误：', error);  });

在这个例子中，我们使用 outputElement 变量选择一个 HTML 元素，用于显示数据。我们使用 textContent 属性来更新该元素的内容，将其设置为 JSON 数据。

API 调用中的错误处理

在 JavaScript 中进行 API 调用时，错误处理是一个重要的部分。API 请求可能因为多种原因失败，例如网络问题、服务器故障或错误的 URL。

在之前的例子中，我们使用了 fetch 的基于 Promise 的错误处理来捕获和处理错误。

除了 catch 块之外，您还可以使用 response.status 检查 HTTP 状态码，以确定错误的性质。下面是一个示例：

const apiUrl = 'https://api.example.com/data';fetch(apiUrl)  .then(response => {    if (!response.ok) {      if (response.status === 404) {        throw new Error('数据未找到');      } else if (response.status === 500) {        throw new Error('服务器错误');      } else {        throw new Error('网络响应不正常');      }    }    return response.json();  })  .then(data => {    outputElement.textContent = JSON.stringify(data, null, 2);  })  .catch(error => {    console.error('错误：', error);  });

在这个示例中，我们检查特定的 HTTP 状态码（比如 404 和 500）并提供更详细的错误消息。您可以根据应用的需要自定义错误处理。

如何进行 POST 请求

到目前为止，我们专注于进行 GET 请求，用于从 API 获取数据。但是，您也可能需要通过 POST 请求将数据发送到 API。

下面是使用 fetch 发起简单 POST 请求的方法：

const apiUrl = 'https://api.example.com/data';const data = {  name: 'John Doe',  email: '[email protected]',};const requestOptions = {  method: 'POST',  headers: {    'Content-Type': 'application/json',  },  body: JSON.stringify(data),};fetch(apiUrl, requestOptions)  .then(response => {    if (!response.ok) {      throw new Error('网络响应不正常');    }    return response.json();  })  .then(data => {    outputElement.textContent = JSON.stringify(data, null, 2);  })  .catch(error => {    console.error('错误：', error);  });

在这个例子中：

我们定义了 API URL 和要发送的数据，将其作为一个对象。
我们创建了一个 requestOptions 对象，指定了方法（POST）、内容类型（application/json）和以 JSON 格式发送的数据。
我们将 requestOptions 对象传递给 fetch 函数。

其余的代码与之前的例子类似，包括错误处理和数据处理。

如何使用 API 密钥

许多 API 需要通过 API 密钥进行身份验证，以确保只有经授权的用户可以访问其数据。当与需要 API 密钥的 API 一起工作时，您需要在请求中包含该密钥。

下面是如何在请求中包含 API 密钥的示例：

const apiKey = 'your_api_key_here';const apiUrl = 'https://api.example.com/data';const requestOptions = {  method: 'GET',  headers: {    'Authorization': `Bearer ${apiKey}`,  },};fetch(apiUrl, requestOptions)  .then(response => {    if (!response.ok) {      throw new Error('网络响应不正常');    }    return response.json();  })  .then(data => {    outputElement.textContent = JSON.stringify(data, null, 2);  })  .catch(error => {    console.error('错误：', error);  });

在这个例子中，我们定义一个apiKey变量，并在requestOptions对象的headers中包含带有”Bearer”前缀的它。请确保将'your_api_key_here'替换为您实际的API密钥。

异步JavaScript

API调用通常是异步的，这意味着它们在等待响应时不会阻塞代码的执行。这很重要，因为它允许您的Web应用在处理潜在缓慢的网络请求时保持响应性。

为了处理异步操作，我们使用Promise和.then()方法来指定操作完成时应该发生什么。这使得您的JavaScript应用的主线程可以在等待API响应时继续运行其他任务。

下面是异步JavaScript工作原理的概述：

当您调用fetch时，它会启动一个异步操作并立即返回一个promise。

您使用.then()方法来附加在promise成功解析（带有响应）或失败（带有错误）时应该执行的函数。

任何位于.then()块之外的代码在API调用进行中时可以继续运行。

这种异步行为有助于确保您的应用程序保持响应并在等待数据时不会冻结。

API调用的真实示例

现在我们已经介绍了在JavaScript中进行API调用的基本知识，让我们探索几个实际示例，看看如何将这些知识应用到实践中。

示例1：获取天气数据

在这个示例中，我们将使用OpenWeatherMap API获取特定位置的天气数据。您可以在其网站上免费注册API密钥。

下面是如何发起GET请求以获取天气数据并在网页上显示它的方法：

const apiKey = 'your_openweathermap_api_key';const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=London&appid=${apiKey}`;const outputElement = document.getElementById('weather-output');fetch(apiUrl)  .then(response => {    if (!response.ok) {      throw new Error('Network response was not ok');    }    return response.json();  })  .then(data => {    const temperature = data.main.temp;    const description = data.weather[0].description;    const location = data.name;    outputElement.innerHTML = `<p>${location}的温度：${temperature}°C</p>                               <p>天气情况：${description}</p>`;  })  .catch(error => {    console.error('Error:', error);  });

在这个例子中，我们向OpenWeatherMap API发起GET请求，将API密钥作为URL的参数传递，并在网页上显示温度和天气描述。

示例2：向服务器提交表单数据

假设您的网站上有一个简单的联系表单，并且您想将表单数据发送到服务器进行处理。下面是如何发起POST请求以向服务器发送表单数据的方法：

HTML：

<form id="contact-form">  <input type="text" name="name" placeholder="姓名">  <input type="email" name="email" placeholder="电子邮件">  <textarea name="message" placeholder="留言"></textarea>  <button type="submit">提交</button></form><div id="response-message"></div>

JavaScript：

const apiUrl = 'https://api.example.com/submit';const contactForm = document.getElementById('contact-form');const responseMessage = document.getElementById('response-message');contactForm.addEventListener('submit', function (event) {  event.preventDefault();  const formData = new FormData(contactForm);  const requestOptions = {    method: 'POST',    body: formData,  };  fetch(apiUrl, requestOptions)    .then(response => {      if (!response.ok) {        throw new Error('Network response was not ok');      }      return response.text();    })    .then(data => {      responseMessage.textContent = data;    })    .catch(error => {      console.error('Error:', error);    });});

在这个例子中，我们监听表单的提交事件，阻止默认的表单提交行为，并使用FormData将表单数据序列化。然后，我们向服务器发起一个POST请求，发送表单数据，并显示服务器的响应。