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

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

在现代应用程序中，功能通常与各种 API 紧密关联。如果你希望在 JavaScript 应用中访问 API，本教程将提供详细的实践指导。

一. 什么是 REST API（从 JavaScript 的角度）

**API（应用程序编程接口）**是一组规则，规定应用程序如何访问服务、使用哪些命令，以及服务返回哪些数据。它是应用程序与外部服务之间的桥梁。

**REST API（表述性状态转移）**是一种基于 HTTP 协议的 API，具有以下主要约束：

客户端-服务器架构：客户端负责界面，服务器处理逻辑和数据。两者独立，可单独替换。
无状态：服务器不存储客户端状态，状态由客户端维护。
可缓存：客户端可缓存响应，提高性能。

从 JavaScript 的角度来看，REST API 集成即通过库（如 axios 或 fetch）访问网络上的数据源。

二. CRUD 与 HTTP 请求类型

CRUD 代表四种基本操作：创建（Create）、读取（Read）、更新（Update）、删除（Delete），对应 HTTP 请求方法：

POST：创建新数据
GET：读取数据
PUT：更新现有数据
DELETE：删除数据

三. 端点与 CRUD 操作

端点是 REST API 的 URL，例如：

https://example.com/api/resource

端点可用于访问特定数据或功能。

示例：JAAS API 的 CRUD 操作

创建对象：POST 请求，返回对象 ID
读取对象：GET 请求，根据 ID 获取数据
更新对象：PUT 请求，修改指定 ID 数据
删除对象：DELETE 请求，删除指定 ID 数据

四. 使用 JavaScript 调用 API

1. 获取 API 密钥

大多数 API 都需要注册并获取 API 密钥，例如 RapidAPI 平台，通过邮箱、Google 或 GitHub 登录即可快速获取。

2. 测试 API 端点

获取密钥后，可使用 axios 或 fetch 测试端点是否可用，并在控制台查看响应。

3. 构建 JavaScript 应用程序

测试通过后，即可在应用程序中集成 API 调用。

五. 实战示例：评论情绪分析器

项目结构

index.html：页面结构
style.css：样式
text-processing.js：JavaScript 逻辑

HTML 文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>评论情绪分析器</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="main">
    <h1 class="main-header">评论情绪分析器</h1>
    <div class="main-input-comment">
      <textarea id="comment" class="main-comment-area"></textarea>
      <button class="main-analyze-button">分析情绪</button>
    </div>
    <div id="main-result-block" class="main-result-block invisible">
      <p id="result"></p>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/qs/dist/qs.js"></script>
  <script src="text-processing.js"></script>
</body>
</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 文件

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' ? '负面评论！' : '中性评论！';
};

document.querySelector('.main-analyze-button').addEventListener('click', () => {
  const comment = document.getElementById('comment').value.trim();
  if (!comment) return alert('请输入评论内容！');
  analyzeComment(comment, displayResult);
});