学习 JavaScript 中的 REST API

学习 JavaScript 中的 REST API

REST API（表述性状态传输应用程序编程接口）广泛用于构建网络应用程序。本文将帮助您了解如何在 JavaScript 中使用 REST API，涵盖客户端和服务器端实现。

---

1.什么是 REST API？

REST API 允许客户端（例如浏览器或移动应用程序）与服务器通信以获取或操作数据。它遵循使用标准 HTTP 方法的无状态架构。

核心概念

1. 资源：由端点表示（例如，/users 表示用户数据）。
2. HTTP 方法：
   • GET：检索数据。
   • POST：创建一个新资源。
   • PUT：更新现有资源。
   • 删除：删除资源。
3. 数据格式：JSON通常用于交换数据。
4. HTTP 状态代码：
   • 200 OK：成功。
   • 201 已创建：资源已创建。
   • 400 Bad Request：客户端错误。
   • 404 Not Found：找不到资源。
   • 500 内部服务器错误：服务器问题。

---

2.工具和设置

• 对于客户端：

  • 浏览器（带有 fetch 或 axios 库的 JavaScript）。
  • 使用 https://jsonplaceholder.typicode.com 等 API 进行练习。

• 对于服务器端：

  • 安装 Node.js 并使用 Express 框架。

---

3.在客户端使用 REST API

JavaScript 提供了 fetch() API 和 axios 等第三方库来与 REST API 进行交互。

---

使用 fetch() 获取数据

以下是如何从 REST API 检索数据。

// Fetch data from an API
const fetchUsers = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const users = await response.json(); // Parse JSON data
    console.log(users);
  } catch (error) {
    console.error('Error fetching users:', error);
  }
};

fetchUsers();

说明：

1. fetch(url): 发出 HTTP 请求。
2. response.json()：将响应转换为 JSON 格式。
3. 错误处理是使用 try...catch 来捕获网络错误或无效响应来实现的。

---

使用 POST 发送数据

要创建新资源，请使用 POST 方法和 fetch() API。

const createUser = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users', {
      method: 'POST', // HTTP method
      headers: {
        'Content-Type': 'application/json', // Specify JSON format
      },
      body: JSON.stringify({ // Convert JavaScript object to JSON
        name: 'Jane Doe',
        email: 'jane.doe@example.com',
      }),
    });

    const newUser = await response.json(); // Parse JSON response
    console.log(newUser);
  } catch (error) {
    console.error('Error creating user:', error);
  }
};

createUser();

要点：

• method 选项指定 HTTP 方法。
• 标题选项用于指示内容类型。
• 正文包含 JSON 有效负载。

---

4.在服务器端构建 REST API

在后端，Node.js 和 Express 框架通常用于构建 REST API。

设置您的环境

1. 安装 Node.js：下载 Node.js。
2. 初始化一个新项目：

// Fetch data from an API
const fetchUsers = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const users = await response.json(); // Parse JSON data
    console.log(users);
  } catch (error) {
    console.error('Error fetching users:', error);
  }
};

fetchUsers();

---

创建简单的 REST API

这是基本 REST API 服务器的示例。

const createUser = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users', {
      method: 'POST', // HTTP method
      headers: {
        'Content-Type': 'application/json', // Specify JSON format
      },
      body: JSON.stringify({ // Convert JavaScript object to JSON
        name: 'Jane Doe',
        email: 'jane.doe@example.com',
      }),
    });

    const newUser = await response.json(); // Parse JSON response
    console.log(newUser);
  } catch (error) {
    console.error('Error creating user:', error);
  }
};

createUser();

说明：

• 中间件：app.use(express.json()) 解析传入的JSON 请求。
• 路线：
  • GET /users：获取所有用户。
  • GET /users/:id：获取特定用户。
  • POST /users：添加新用户。
  • PUT /users/:id：更新用户详细信息。
  • DELETE /users/:id：删除用户。

---

5.测试您的 REST API

您可以使用Postman等工具或curl等命令行实用程序来测试您的API。

使用邮递员

1. 从这里安装 Postman。
2. 创建一个新请求：
   • GET http://localhost:3000/users：获取所有用户。
   • POST http://localhost:3000/users：使用 JSON 正文添加用户。

使用卷曲

   mkdir rest-api-demo
   cd rest-api-demo
   npm init -y
   npm install express

---

6. REST API 开发最佳实践

1. 使用有意义的端点名称（例如，/users 而不是 /data）。
2. 验证用户输入以防止无效或有害数据。
3. 遵循一致的 HTTP 状态代码。
4. 使用 Swagger 或 Postman 等工具记录您的 API。

---

我的工作代码仓库

结论

REST API 是现代 Web 开发的基石。通过学习在客户端和服务器端与 JavaScript 中的 REST API 进行交互，您将获得构建和集成应用程序的强大技能。实践是关键——从使用公共 API 开始，然后使用 Node.js 和 Express 构建您自己的 API。

---

欢迎就本指南的任何部分提出问题或寻求澄清！

以上是学习 JavaScript 中的 REST API的详细内容。更多信息请关注PHP中文网其他相关文章！