前端如何调用 RESTful API-JavaScript中文网-JavaScript教程资源分享门户

RESTful API 是一种可扩展、轻量级、基于 HTTP 协议的 Web API 标准，它通常用于管理和访问云端数据。通过调用 RESTful API，前端开发人员可以将前端应用程序与后端服务进行连接，实现前后端分离，帮助开发人员更好的构建和维护软件系统。

什么是 RESTful API

RESTful API 是一种 Web API 的设计风格，它采用 HTTP 协议和标准请求方法（例如 GET、POST、PUT、DELETE 等）进行通信。RESTful API 构建在简单、可扩展的基础之上，易于集成到现有的应用程序环境中。

一个符合 RESTful API 的 Web 服务，应该满足以下要求：

无状态 (Stateless)：客户端请求中应存在所有必需的状态信息，服务器无法存储客户端状态。
客户端-服务器 (Client-Server)：客户端和服务器的请求和响应是相互独立的，客户端不关注服务器的状态改变。
按需编码 (Cacheable)：响应数据应该使用可缓存的 HTTP 编码，以降低延迟、提高性能。
统一的接口 (Uniform Interface)：在 RESTful API 中，资源的 URI 表示实体的唯一标识符，通过 HTTP 请求使用标准方法进行操作，例如 GET 命令用于检索资源列表，POST 命令用于添加新资源等。
分层系统 (Layered System)：RESTful API 架构应该如同现代网络架构一般，应该实现代理、网关和负载均衡等机制。

如何调用 RESTful API

在前端应用程序中，常常需要调用 RESTful API 与后端服务进行交互，以实现前后端数据的互通。下面我们分步骤介绍如何在前端中调用 RESTful API。

1. 发起请求

在前端中，我们可以使用 XMLHttpRequest 对象或 Fetch API 与后端进行交互，以获取或更新数据。以下是一个使用 Fetch API 和 Async/Await 的示例代码：

// javascriptcn.com 代码示例
async function fetchData() {
  try {
    const response = await fetch('/api/endpoint');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

2. 设定请求方法和请求头

根据 RESTful API 的设计标准，我们需要使用 HTTP 标准的请求方法（GET、POST、PUT、DELETE）对后端进行请求。同时，我们还需要设置请求头，例如 Content-Type、Accept 等头部信息，以便在请求中正确地发送数据。以下是一个 Fetch API 中设定请求头部信息的示例代码：

// javascriptcn.com 代码示例
const options = {
  method: 'POST',
  headers: { 
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  },
  body: JSON.stringify({ 
    username: 'example', 
    password: 'example' 
  })
};

fetch('/api/endpoint', options)
  .then(response => response.json())
  .catch(error => console.error(error));

3. 访问 API 资源

在 RESTful API 设计中，资源通过唯一标识符（URI）进行访问。在前端应用程序中，在发起请求时使用 URI 对资源进行访问。以下是一个 Fetch API 访问资源的示例代码：

fetch('/api/endpoint?id=123')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

4. 处理响应数据

一旦成功连接到后端资源并发起请求之后，我们需要处理响应数据。这个响应数据可以是数据流（binary）、JSON 等格式。以下是一个 Fetch API 处理响应 JSON 数据的示例代码：

fetch('/api/endpoint')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

总结

通过本文的介绍，我们了解到了 RESTful API 的设计原则和前端应用程序如何调用 RESTful API。了解 RESTful API 的7种设计原则（无状态、统一的接口、按需编码、客户端-服务器模型、分层系统、可扩展、代码应优先于配置）不仅对前端开发人员有益，同时也能帮助开发人员更好地构建和设计现代应用程序。

而了解如何使用 Fetch API 和 Async/Await 设计前端调用 RESTful API 的逻辑，将对前端开发人员在实际开发中有很大的帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6527c3ea7d4982a6eba5a5c5