JavaScript与REST API交互全指南｜从XHR到Fetch的最佳实践

一. 介绍：JavaScript与REST API交互的重要性

在现代 Web 开发中，JavaScript 是客户端与服务器通信的核心工具。REST API 提供了标准化访问资源（如数据库、服务数据等）的接口，使移动应用程序和 Web 应用程序能够通过 API 获取或提交数据。

本文旨在回答开发者在使用 JavaScript 与 REST API 交互 时的常见问题，并展示多种实现方法，以便您的 Web 应用能够高效使用 REST API。

二. 何为“交互”？

在 REST API 的上下文中，“交互”指向 API 发出请求并接收响应的过程。通过这种方式，应用程序可以：

• 获取数据（GET 请求）
• 创建、更新或删除数据（POST、PUT、DELETE 请求）

接下来，我们将介绍几种使用 JavaScript 与 REST API 交互的常见方法。

三. 使用普通 JavaScript 发出 HTTP 请求

使用原生 JavaScript（Vanilla JavaScript）发出 HTTP 请求可以帮助开发者理解底层机制。以下示例展示了使用 XMLHttpRequest 执行 GET 请求：

const request = new XMLHttpRequest();
const url = 'http://localhost:5000/movies';
request.open("GET", url);
request.send();
request.onload = (e) => {
    alert(request.response);
};

1. 代码说明

• 创建 XMLHttpRequest 对象，用于保存请求数据
• open("GET", url)：指定请求类型和目标 URL
• send()：发送请求
• onload：处理返回数据

四. 使用普通 JavaScript 发送表单数据

发送表单数据可以通过 HTML 或 JavaScript 实现：

a. HTML 表单示例

<form action="http://localhost:5000/" method="post">
    <input type="text" name="title" value="Matrix">
    <input type="text" name="year" value="1999">
    <button type="submit">Submit</button>
</form>

b. JavaScript 示例

const formData = new FormData();
formData.append("title", "Matrix");
formData.append("year", "1999");

const response = new XMLHttpRequest();
response.open("POST", "http://localhost:5000/");
response.send(formData);
response.onload = (e) => {
    alert(response.response);
};

这里我们使用 FormData 对象封装表单字段，并通过 POST 方法发送到 API。

五. 使用普通 JavaScript 发送 JSON 数据

发送 JSON 数据需要将对象转换为 JSON 字符串，并设置 Content-Type 请求头：

const response = new XMLHttpRequest();
const json = JSON.stringify({ title: "Matrix", year: "1999" });

response.open("POST", "http://localhost:5000/");
response.setRequestHeader("Content-Type", "application/json");
response.send(json);
response.onload = (e) => {
    alert(response.response);
};

六. 使用 fetch 获取数据

现代 JavaScript（ES6）提供了 fetch API，简化了 HTTP 请求：

const url = 'http://localhost:5000/movies';
fetch(url)
    .then(data => data.json())
    .then(json => {
        alert(JSON.stringify(json));
    });

1. fetch 的优点

• 语法简洁，可读性高
• 内置 Promise 支持，方便链式处理响应
• 相比 XMLHttpRequest 更现代

七. 使用 fetch 发送 JSON 数据

发送 JSON 数据同样简单：

const url = 'http://localhost:5000/';
const data = { title: "Matrix", year: "1994" };

fetch(url, {
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data),
    method: "POST"
})
    .then(data => data.json())
    .then(json => {
        console.log(json);
    });

这里我们将 headers、body 和 method 配置集中在一起，使请求逻辑清晰。

八. 结论与最佳实践

• 推荐使用 fetch：现代化、简洁、可维护性强
• 其他可选库：axios、jQuery、Angular HttpClient
• 掌握原生 XMLHttpRequest 也有助于理解 HTTP 请求底层机制

通过掌握这些方法，您可以轻松实现 JavaScript 与 REST API 交互，并在 Web 应用中高效获取或提交数据。

原文链接: https://blog.teclado.com/how-to-interact-with-rest-apis-from-javascript/