JavaScript 调用 API 全指南：从基础概念到实战示例

没有 JavaScript，现代 Web 开发几乎无法想象。经过多年的发展，这门语言已经从一个简单的插件演变为功能强大且多用途的工具。如今，JavaScript 不仅在前端开发中占据重要地位，还广泛应用于后端开发。

在现代应用程序中，功能通常与各种 API 的交互密切相关。如果您在 JavaScript 应用程序中需要访问 API，但不知道从何入手，那么本教程将为您提供详细的指导。

什么是 REST API（从 JavaScript 的角度来看）

首先，我们需要了解 API 的基本概念。API（应用程序编程接口）是一组由特定服务共享的规则，规定了应用程序可以如何访问服务、使用哪些命令以及服务可以返回哪些数据。API 充当应用程序与外部服务之间的桥梁。

REST API（表述性状态转移）是一种基于 HTTP 协议的 API，它通过特定的限制与 Web 服务进行通信。以下是 REST API 的一些主要约束：

客户端-服务器架构：客户端负责用户界面，服务器负责后端逻辑和数据存储。两者相互独立，可以单独替换。
无状态：服务器端不存储客户端的状态信息。会话状态由客户端维护。
可缓存：客户端可以缓存服务器的响应以提高性能。

从 JavaScript 的角度来看，REST API 集成可以理解为通过某些库与互联网上特定地址的数据源进行交互。

CRUD 和请求类型

CRUD 是一个编程术语，代表四种基本的数据库操作：创建（Create）、读取（Read）、更新（Update）和删除（Delete）。在 REST API 中，这些操作对应于以下 HTTP 请求方法：

POST：用于创建新数据。例如，向服务器添加一条新记录。
GET：用于读取数据。例如，从服务器获取一份数据列表。
PUT：用于更新现有数据。例如，修改某条记录的内容。
DELETE：用于删除数据。例如，移除某条记录。

端点与 CRUD 操作

在使用 REST API 时，理解端点的概念至关重要。端点通常是一个特定的 URL 地址，例如 https://example.com/api/resource，通过该地址可以访问特定的数据或功能。

为了更好地理解端点和 CRUD 操作，我们以 RapidAPI 提供的 JAAS API 为例。RapidAPI 是一个 API 集线器，允许开发者访问数千种不同的 API。以下是 JAAS API 的 CRUD 操作示例：

创建对象：通过 POST 请求向服务器发送数据，并保存返回的对象 ID。
读取对象：通过 GET 请求获取指定 ID 的对象数据。
更新对象：通过 PUT 请求修改指定 ID 的对象数据。
删除对象：通过 DELETE 请求删除指定 ID 的对象。

以下是 JAAS API 的端点界面示例：
JAAS API 示例

使用 JavaScript 连接到 API

现在我们已经了解了 REST API 的基本概念，接下来我们将学习如何使用 JavaScript 与 API 进行交互。

1. 获取 API 密钥

API 密钥是一个唯一的字符串，用于标识用户。在大多数情况下，您需要注册 API 服务并获取 API 密钥。以 RapidAPI 为例，您可以通过邮箱、Google 或 GitHub 账号快速注册并获取密钥。

2. 测试 API 端点

在获取 API 密钥后，您可以根据 API 文档的规则向端点发送请求，测试其是否正常工作。例如，使用 axios 库可以快速创建 JavaScript 代码片段，向端点发送请求并在浏览器控制台中查看响应。

3. 创建 JavaScript 应用程序

通过 API 测试后，您可以开始构建包含 API 调用的 JavaScript 应用程序。

示例：构建评论情绪分析器

接下来，我们将创建一个简单的 JavaScript 应用程序，用于分析用户评论的情绪。

项目结构

项目包含以下三个文件：

index.html：HTML 模板文件。
style.css：样式文件。
text-processing.js：JavaScript 逻辑文件。

HTML 文件

HTML 文件用于显示评论输入框和分析按钮：




  
  
  
  
  
  
  评论情绪分析器


  
    评论情绪分析器

CSS 文件

样式文件为页面提供基本样式：

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f4f4f4;
}
.main {
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 400px;
  text-align: center;
}
.main-comment-area {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.main-analyze-button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.main-analyze-button:hover {
  background-color: #0056b3;
}
.main-result-block {
  margin-top: 20px;
}
.invisible {
  display: none;
}

JavaScript 文件

JavaScript 文件包含 API 调用逻辑：

const API_URL = 'https://japerk-text-processing.p.rapidapi.com/sentiment/';
const REQUEST_HEADERS = {
  'X-RapidAPI-Host': 'japerk-text-processing.p.rapidapi.com',
  'X-RapidAPI-Key': 'YOUR_API_KEY',
  'Content-Type': 'application/x-www-form-urlencoded',
};

const analyzeComment = (comment, callback) => {
  const data = Qs.stringify({ text: comment, language: 'english' });
  axios.post(API_URL, data, { headers: REQUEST_HEADERS })
    .then(response => callback(response.data))
    .catch(error => console.error(error));
};const displayResult = result => {
  const resultBlock = document.getElementById('main-result-block');
  resultBlock.classList.remove('invisible');
  const resultElement = document.getElementById('result');
  resultElement.textContent = result.label === 'pos' ? '正面评论！' :
                              result.label === 'neg' ? '负面评论！' : '中性评论！';
};const onAnalyzeButtonClick = () => {
  const comment = document.getElementById('comment').value.trim();
  if (!comment) {
    alert('请输入评论内容！');
    return;
  }
  analyzeComment(comment, displayResult);
};

结论

原文链接: https://rapidapi.com/blog/how-to-use-an-api-with-javascript/