【Web前端】Web API：构建Web应用核心

什么是 API

API（应用程序编程接口）是一组定义了软件组件之间如何交互的规则和协议。它允许一个程序调用另一个程序的功能，而不用了解其内部实现细节。 Web 开发中，API 通常用于实现前端与后端之间的通信。

客户端 JavaScript 中的 API

客户端 JavaScript 提供了众多可用的 API。这些 API 并不属于 JavaScript 语言的核心部分，而是建立在其基础之上，为开发者使用 JavaScript 代码提供了额外的强大功能。通常，这些 API 可以分为两种类型：

第一类是浏览器 API，它们嵌入于 Web 浏览器中，能够从浏览器及其周边环境获取数据，并用于执行各种复杂而有益的操作。例如，Web 音频 API 为在浏览器中处理音频提供了一整套 JavaScript 接口，允许用户进行音轨提取、音量调整和特效应用等操作。在这个过程中，浏览器实际上使用了一些复杂的底层代码（例如 C++ 或 Rust）来完成实际的音频处理，但这种复杂性已通过 API 得到了有效的封装。

第二类是第三方 API，这类 API 通常并不默认内置于浏览器中，开发者通常需要在网络上某个地方获取相关代码和信息。例如，Google Maps API 使得在网站上嵌入交互式地图成为可能。它提供了一系列专门的接口，方便用户查询 Google 地图服务并获取特定的信息。

示例：使用 DOM API 操作网页元素

// 获取元素
const element = document.getElementById("myElement");// 修改元素内容
element.textContent = "Hello, World!";

在这里，​​document.getElementById​​ 是一个 DOM API，允许我们通过元素的 ID 获取对应的 DOM 对象。

JavaScript、API 和其他 JavaScript 工具之间的关系

JavaScript 是一种编程语言，而 API 则是 JavaScript 与其他软件组件之间的接口。在现代 Web 开发中，JavaScript 通常与其他工具如框架（如 React、Angular）、库（如 jQuery）一起使用，这些工具也使用 API 来实现功能。

例如，jQuery 本身是基于 JavaScript 的一个库，它提供了一组 API 来简化 DOM 操作和 AJAX 请求。

示例：使用 jQuery 的 AJAX API

$.ajax({url: "https://api.example.com/data",method: "GET",success: function(response) {console.log(response);},error: function(error) {console.error("Error:", error);}
});

这个例子中 jQuery 的 ​​$.ajax​​ 方法是一个 API 调用，使我们能够轻松地发送网络请求。

API 可以做什么

API 的功能非常广泛，主要包括数据获取、数据交互、功能调用等。以下是一些常见的 API 类型。

常见浏览器 API

  1. Fetch API：用于发起网络请求。
  2. Web Storage API：允许在用户的浏览器中存储数据。
  3. Canvas API：用于在网页上绘制图形。
  4. Geolocation API：获取用户的地理位置信息。
  5. WebSockets API：实现实时、双向通信。

示例：使用 Fetch API 获取数据

fetch("https://api.example.com/data").then(response => {if (!response.ok) {throw new Error("Network response was not ok");}return response.json();}).then(data => {console.log(data);}).catch(error => {console.error("There was a problem with the fetch operation:", error);});

常见第三方 API

  1. Twitter API：用于与 Twitter 数据进行交互。
  2. Google Maps API：用于在应用中嵌入地图和位置服务。
  3. Stripe API：用于处理在线支付。
  4. OpenWeatherMap API：用于获取天气信息。

示例：使用 Google Maps API

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script>function initMap() {const location = { lat: -34.397, lng: 150.644 };const map = new google.maps.Map(document.getElementById("map"), {zoom: 8,center: location,});const marker = new google.maps.Marker({position: location,map: map,});}
</script>
<div id="map" style="height: 500px;"></div>

通过引入 Google Maps API 的 JavaScript 库来创建一个地图并在特定位置放置一个标记。

API 如何工作

基于对象的 API

现代 API 通常采用面向对象的设计，使得功能更加模块化、易于使用和扩展。通过将相关的功能组织到一个对象中，开发者可以方便地调用该对象的方法来实现特定的操作。这种方法不仅提高了代码的可读性，还使得维护和扩展变得更加简单。

创建一个简单的 API 对象

示例创建一个用户管理 API 对象，并定义一些基本的方法来与后端进行交互：

const userAPI = {// 获取用户信息getUser: function(userId) {return fetch(`https://api.example.com/users/${userId}`).then(response => {if (!response.ok) {throw new Error('Network response was not ok');}return response.json();});},// 创建新用户createUser: function(userData) {return fetch("https://api.example.com/users", {method: "POST",body: JSON.stringify(userData),headers: {"Content-Type": "application/json"}}).then(response => {if (!response.ok) {throw new Error('Failed to create user');}return response.json();});},// 更新用户信息updateUser: function(userId, userData) {return fetch(`https://api.example.com/users/${userId}`, {method: "PUT",body: JSON.stringify(userData),headers: {"Content-Type": "application/json"}}).then(response => {if (!response.ok) {throw new Error('Failed to update user');}return response.json();});},// 删除用户deleteUser: function(userId) {return fetch(`https://api.example.com/users/${userId}`, { method: "DELETE" }).then(response => {if (!response.ok) {throw new Error('Failed to delete user');}return response.json(); // 可能返回删除成功的信息});}
};// 使用 API 示例
userAPI.getUser(1).then(user => console.log('Fetched User:', user)).catch(error => console.error('Error fetching user:', error));const newUser = { name: "Jane Doe", email: "jane@example.com" };
userAPI.createUser(newUser).then(createdUser => console.log('Created User:', createdUser)).catch(error => console.error('Error creating user:', error));

获取用户信息 (​​getUser​​)：这个方法接受 ​​userId​​ 参数，通过 Fetch API 发起 GET 请求以获取指定用户的信息。在响应处理中，检查响应状态并解析为 JSON 格式。

创建新用户 (​​createUser​​)：接受 ​​userData​​ 参数，通过 POST 请求发送新用户的数据到服务器。设置请求头为 ​​Content-Type: application/json​​ 以告知服务器接收的是 JSON 数据。

更新用户信息 (​​updateUser​​)：类似于创建用户，使用 PUT 方法来更新现有用户的信息。

删除用户 (​​deleteUser​​)：根据 ​​userId​​ 发起 DELETE 请求，从服务器移除指定的用户。

这种面向对象的方法允许我们轻松地添加更多功能，例如搜索用户、分页获取数据等，只需在 ​​userAPI​​ 对象中添加新的方法即可。此外，如果需要改变 API 的基础 URL，只需修改一次，而不必在整个应用程序中查找所有引用。

可识别的入口点

API 通常通过特定的 URL 路径（即“端点”）提供访问，每个端点对应于 API 提供的某种功能。这种结构化的设计使得开发者能够清晰地理解和使用 API，便于进行数据请求、操作和管理。

1、API 端点

在 RESTful API 中，端点是客户端与服务器之间交互的具体路径。每个端点通常对应着一种资源或一组相关的操作。例如，在用户管理系统中，我们可能会有以下几个常见的 API 端点：

  1. 获取所有用户：用于检索系统中的所有用户信息。
  2. 根据 ID 获取单个用户：用于获取特定用户的信息。
  3. 创建新用户：用于向系统中添加新用户。
  4. 更新现有用户：用于修改已有用户的信息。
  5. 删除用户：用于从系统中移除指定的用户。

如何定义多个 API 端点，并且使用 JavaScript 对这些端点进行组织：

const apiEndpoints = {getUsers: "/api/users", // 获取所有用户getUserById: (id) => `/api/users/${id}`, // 根据 ID 获取单个用户createUser: "/api/users", // 创建新用户updateUser: (id) => `/api/users/${id}`, // 更新现有用户deleteUser: (id) => `/api/users/${id}` // 删除指定用户
};// 使用示例：
const userId = 123;// 获取所有用户的请求
fetch(apiEndpoints.getUsers).then(response => response.json()).then(data => console.log(data));// 根据 ID 获取单个用户的请求
fetch(apiEndpoints.getUserById(userId)).then(response => response.json()).then(data => console.log(data));// 创建新用户的请求（假设我们要发送 POST 请求）
fetch(apiEndpoints.createUser, {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ name: "John Doe", email: "john@example.com" })
})
.then(response => response.json())
.then(data => console.log('New User Created:', data));
2、HTTP 方法

不同类型的操作通常对应不同的 HTTP 方法，这些方法包括：

  • GET：获取资源（如获取所有或特定的数据）。
  • POST：创建新的资源（如添加新数据）。
  • PUT/PATCH：更新现有资源（如修改已有数据）。
  • DELETE：删除资源（如移除不再需要的数据）。

可以看到 ​​fetch​​ 函数如何使用不同的方法来调用相应的 API 端点。

3、错误处理

实际中还需要考虑错误处理，确保应用程序能够处理各种异常情况，例如网络问题或服务器错误：

// 错误处理示例
fetch(apiEndpoints.getUsers).then(response => {if (!response.ok) {throw new Error('Network response was not ok');}return response.json();}).then(data => console.log(data)).catch(error => console.error('There has been a problem with your fetch o

使用事件处理状态变化

许多现代 API 利用事件驱动的编程模型来通知调用者状态的变化。这种机制使得用户能够实时响应这些变化，从而增强了交互性和用户体验。通过使用事件监听器，开发者可以轻松地处理各种用户操作或系统状态更新。

1、事件驱动编程

在事件驱动编程中，程序的执行流是由事件的发生而控制的。当特定事件发生时（例如用户点击按钮、接收到数据等），相应的回调函数会被触发并执行。这样的设计使得应用程序能够更加灵活地应对动态变化。

以下是一个简单示例，如何为按钮添加点击事件监听器，并在按钮被点击时执行特定操作：

// 获取页面中的按钮元素
const button = document.getElementById("myButton");// 为按钮添加点击事件监听器
button.addEventListener("click", function() {console.log("Button was clicked!");// 可以在这里执行其他操作，例如更新 UI 或发送请求
});
2、进一步扩展

除了基本的点击事件，JavaScript 的 ​​addEventListener​​ 方法还支持多种类型的事件，例如：

  • 鼠标事件：如 ​​mouseover​​、​​mouseout​​、​​dblclick​​
  • 键盘事件：如 ​​keydown​​、​​keyup​​
  • 表单提交：如 ​​submit​​
  • 网络请求完成：例如使用 Fetch API 时，可以结合 Promise 和自定义事件进行处理。

下面是一个更复杂的示例，为同一个按钮添加多个不同类型的事件监听器：

const button = document.getElementById("myButton");// 点击时记录信息
button.addEventListener("click", function() {console.log("Button was clicked!");
});// 鼠标悬停时改变样式
button.addEventListener("mouseover", function() {button.style.backgroundColor = "lightblue";
});// 鼠标离开时恢复样式
button.addEventListener("mouseout", function() {button.style.backgroundColor = "";
});
3、自定义事件

除了内置的 DOM 事件外，开发者还可以创建和触发自定义事件，以便在应用程序内部传递信息。如当某个异步操作完成后，可以触发一个自定义事件来通知相关部分进行相应处理：

// 创建一个新的自定义事件
const myCustomEvent = new Event('dataLoaded');// 添加自定义事件监听器
document.addEventListener('dataLoaded', function() {console.log('Data has been loaded and is ready to use!');
});// 模拟数据加载并触发自定义事件
setTimeout(() => {// 数据加载完成后触发自定义事件document.dispatchEvent(myCustomEvent);
}, 2000);

安全机制

现代 API 的安全性是一个至关重要的话题，尤其是在数据泄露和未授权访问事件频发的背景下。为了确保敏感数据的保护和系统的完整性，开发者通常会采用多种安全机制。

1、常见的安全措施

认证（Authentication）：

认证是确认用户身份的过程，常用的方法包括 OAuth、JWT（JSON Web Token）、API 密钥等。OAuth 是一种广泛使用的授权框架，它允许第三方应用程序在不暴露用户凭据的情况下访问用户的数据。

数据加密：

数据加密是通过将信息转换为不可读格式来保护数据的一种方法。无论是在传输过程中还是存储时，加密都能有效防止未授权访问。例如，在传输层使用 HTTPS 协议可以确保数据在客户端与服务器之间传输时不会被窃听。

CORS（跨源资源共享）策略：

CORS 是一种浏览器机制，用于限制网页能够请求不同域名上的资源。通过设置 CORS 策略，服务器可以控制哪些来源的网站可以访问其 API。这是一种防止恶意网站利用用户浏览器发送请求的重要手段。

下面是一个使用 Express 框架设置 CORS 的示例代码：

const express = require('express');
const cors = require('cors');
const app = express();// 设置 CORS 以允许来自特定域的请求
app.use(cors({origin: 'https://your-website.com', // 只允许该域名下的请求methods: ['GET', 'POST'], // 限制允许的方法allowedHeaders: ['Content-Type', 'Authorization'] // 指定允许的请求头
}));// 示例路由
app.get('/api/data', (req, res) => {res.json({ message: "Hello from the API!" });
});// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {console.log(`Server is running on port ${PORT}`);
});
2、安全性综合考虑

除了上述提到的安全措施外，还应考虑以下方面：

  • 输入验证和输出编码：对所有输入进行严格验证，以防止 SQL 注ru、XSS 等攻ji。同时，对输出内容进行适当编码，以避免注入攻ji。
  • 速率限制：通过实施速率限制，可以减少暴力破jie和拒绝服务攻ji（DoS）的风险。
  • 日志记录和监控：保持详细的日志记录，并定期监控异常活动，有助于及时发现并响应潜在威胁。
  • 版本管理与更新：确保所用库和依赖项保持最新状态，以修补已知漏dong。

通过结合这些安全措施，开发者可以显著提高现代 API 的安全性，从而更好地保护敏感数据和维护系统稳定性。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/60223.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Telegram bot Mini-App开发实践---Telegram简单介绍与初始化小程序获取window.Telegram.WebApp对象并解析

Telegram bot Mini-App开发实践---Telegram简单介绍与初始化小程序获取window.Telegram.WebApp对象并解析

➡️【好看的灵魂千篇一律，有趣的鲲志一百六七！】- 欢迎认识我～～ 作者：鲲志说 （公众号、B站同名，视频号：鲲志说996） 科技博主：极星会 星辉大使 后端研发：java、go、python、TS，前电商、现web3 主理人：COC杭州开发者社区主理人 、周周黑客松杭州主理人、 AI爱好…
阅读更多...
VRT: 关于视频修复的模型

VRT: 关于视频修复的模型

VRT: 关于视频修复的模型 1. 视频修复的背景与重要性背景介绍&#xff1a;重要性&#xff1a; 2. VRT的重要性和研究背景VRT的背景&#xff1a;VRT的重要性&#xff1a; 3. 视频修复概述3.1 定义与目标3.2 与单图像修复的区别3.3 对时间信息利用的需求 4. VRT模型详解4.1 整体框…
阅读更多...
【linux】ubuntu下常用快捷键【笔记】

【linux】ubuntu下常用快捷键【笔记】

环境 硬件&#xff1a;通用PC 系统&#xff1a;Ubuntu 20.04 软件 &#xff1a; 打开终端窗口&#xff1a;Ctrl Alt T 关闭当前窗口&#xff1a;Alt F4 改变窗口大小&#xff1a;Alt F8 移动窗口&#xff1a; Alt F7 配合 “←”、“→”、“↑”、“↓”来移动窗口 …
阅读更多...
java 增强型for循环 详解

java 增强型for循环 详解

Java 增强型 for 循环&#xff08;Enhanced for Loop&#xff09;详解 增强型 for 循环&#xff08;也称为 “for-each” 循环&#xff09;是 Java 从 JDK 5 开始引入的一种便捷循环语法&#xff0c;旨在简化对数组或集合类的迭代操作。 1. 基本语法 语法格式 for (类型 变量…
阅读更多...
游戏引擎学习第17天

游戏引擎学习第17天

视频参考:https://www.bilibili.com/video/BV1LPUpYJEXE/ 回顾上一天的内容 1. 整体目标&#xff1a; 处理键盘输入&#xff1a;将键盘输入的处理逻辑从平台特定的代码中分离出来&#xff0c;放入更独立的函数中以便管理。优化消息循环&#xff1a;确保消息循环能够有效处理 …
阅读更多...
jmeter常用配置元件介绍总结之配置元件

jmeter常用配置元件介绍总结之配置元件

系列文章目录 1.windows、linux安装jmeter及设置中文显示 2.jmeter常用配置元件介绍总结之安装插件 3.jmeter常用配置元件介绍总结之线程组 4.jmeter常用配置元件介绍总结之函数助手 5.jmeter常用配置元件介绍总结之取样器 6.jmeter常用配置元件介绍总结之jsr223执行pytho…
阅读更多...
python基础之学生成绩管理系统

python基础之学生成绩管理系统

声明&#xff1a;学习视频来自b站up主 泷羽sec&#xff0c;如涉及侵权马上删除文章 声明&#xff1a;本文主要用作技术分享&#xff0c;所有内容仅供参考。任何使用或依赖于本文信息所造成的法律后果均与本人无关。请读者自行判断风险&#xff0c;并遵循相关法律法规。 while…
阅读更多...
关联度分析、灰色预测GM(1,1)、GM(1,1)残差模型——基于Python实现

关联度分析、灰色预测GM(1,1)、GM(1,1)残差模型——基于Python实现

关联度分析 import numpy as np import pandas as pd #关联度分析 #参考序列 Y_0[170,174,197,216.4,235.8] #被比较序列 Y_1[195.4,189.9,187.2,205,222.7] Y_2[308,310,295,346,367]#初始化序列 X_0np.array(Y_0)/Y_0[0] X_1np.array(Y_1)/Y_1[0] X_2np.array(Y_2)/Y_2[0]#计…
阅读更多...
Java基础知识(五)

Java基础知识(五)

文章目录 ObjectObject 类的常见方法有哪些&#xff1f; 和 equals() 的区别hashCode() 有什么用&#xff1f;为什么要有 hashCode&#xff1f;为什么重写 equals() 时必须重写 hashCode() 方法&#xff1f; 参考链接 Object Object 类的常见方法有哪些&#xff1f; Object 类…
阅读更多...
【大模型】LLaMA: Open and Efficient Foundation Language Models

【大模型】LLaMA: Open and Efficient Foundation Language Models

链接&#xff1a;https://arxiv.org/pdf/2302.13971 论文&#xff1a;LLaMA: Open and Efficient Foundation Language Models Introduction 规模和效果 7B to 65B&#xff0c;LLaMA-13B 超过 GPT-3 (175B)Motivation 如何最好地缩放特定训练计算预算的数据集和模型大小&…
阅读更多...
解决 Gradle 报错：`Plugin with id ‘maven‘ not found` 在 SDK 开发中的问题

解决 Gradle 报错：`Plugin with id ‘maven‘ not found` 在 SDK 开发中的问题

在 SDK 开发过程中&#xff0c;使用 Gradle 构建和发布 SDK 是常见的任务。在将 SDK 发布为 AAR 或 JAR 包时&#xff0c;你可能会使用 apply plugin: maven 来发布到本地或远程的 Maven 仓库。但是&#xff0c;随着 Gradle 版本的更新&#xff0c;特别是从 Gradle 7 版本开始&…
阅读更多...
2024 RISC-V中国峰会 安全相关议题汇总

2024 RISC-V中国峰会 安全相关议题汇总

安全之安全(security)博客目录导读 第四届 RISC-V 中国峰会（RISC-V Summit China 2024）于8月21日至23日在杭州成功举办。此次峰会汇聚了 RISC-V 国际基金会、百余家重点企业及研究机构，约3000人线下参与，并在19日至25日间举办了超过20场同期活动，与全球开发者共同…
阅读更多...
Pyhon基础数据结构（列表）【蓝桥杯】

Pyhon基础数据结构（列表）【蓝桥杯】

a [1,2,3,4,5] a.reverse() print("a ",a) a.reverse() print("a ",a)# 列表 列表&#xff08;list&#xff09;有由一系列按照特定顺序排序的元素组成 列表是有顺序的&#xff0c;访问任何元素需要通过“下标访问” 所谓“下标”就是指元素在列表从左…
阅读更多...
【Visual Studio系列教程】如何在 VS 上编程？

【Visual Studio系列教程】如何在 VS 上编程？

上一篇博客中&#xff0c;我们介绍了《什么是 Visual Studio&#xff1f;》。本文&#xff0c;我们来看第2篇《如何在 VS 上编程&#xff1f;》。阅读本文大约10 分钟。我们会向文件中添加代码&#xff0c;了解 Visual Studio 编写、导航和了解代码的简便方法。 本文假定&…
阅读更多...
MySQL更换瀚高语法更换

MySQL更换瀚高语法更换

MySQL更换瀚高语法更换 一、前言二、语句 一、前言 水一篇,mysql更换瀚高之后&#xff0c;一些需要更换的语法介绍 > 二、语句 MySQL瀚高MySQL用法瀚高用法说明ifnull(x,y)coalesce(x,y)相同相同用于检查两个表达式并返回第一个非空表达式。如果第一个表达式不是 NULL&…
阅读更多...
[ 跨域问题 ] 前后端以及服务端 解决跨域的各种方法

[ 跨域问题 ] 前后端以及服务端 解决跨域的各种方法

这篇文章主要介绍了跨域问题&#xff0c;包括其定义、产生原因及各种解决方法。原因是浏览器安全策略限制&#xff0c;方法有 JSONP、CORS、Domain、 postMessage、Nginx配置、.NetCore配置。 前言 什么是跨域问题? 在Web应用中&#xff0c;当一个网页的脚本试图去请求另一个域…
阅读更多...
论文阅读——Intrusion detection systems using longshort‑term memory (LSTM)

论文阅读——Intrusion detection systems using longshort‑term memory (LSTM)

一.基本信息 论文名称&#xff1a;Intrusion detection systems using longshort‑term memory (LSTM) 中文翻译&#xff1a;基于长短期记忆(LSTM)的入侵检测系统 DOI&#xff1a;10.1186/s40537-021-00448-4 作者&#xff1a;FatimaEzzahra Laghrissi1* , Samira Douzi2*, Kha…
阅读更多...
大数据挖掘期末复习

大数据挖掘期末复习

大数据挖掘 数据挖掘 数据挖掘定义 技术层面&#xff1a; 数据挖掘就是从大量的、不完全的、有噪声的、模糊的、随机的实际应用数据中&#xff0c;提取隐含在其中、人们事先不知道的、但又潜在有用的信息的过程。 数据准备环节 数据选择 质量分析 数据预处理 数据仓库 …
阅读更多...
搭建es环境

搭建es环境

centos7搭建elasticsearch环境 首先考虑使用 Docker 来安装 Elasticsearch、Kibana 和 Logstash。在安装过程中&#xff0c;可能会遇到一些问题&#xff0c;但通过适当的方法可以解决。 docker pull docker.elastic.co/elasticsearch/elasticsearch:8.14.3 首先创建一个网络&a…
阅读更多...
k8s 学习笔记之 k8s 存储管理

k8s 学习笔记之 k8s 存储管理

文章目录 概述卷卷的常用类型emptyDir边车容器 HostPathnfsPV/PVC静态供给 PV 和 PVC创建静态 PV创建 pvc创建 pod 应用 pvc 动态供给 PV 和 PVC创建 StorageClass创建 pvc创建 pod 使用 pvc PV 的生命周期 内置存储对象ConfigMapSecret 配置文件自动重新加载方案**1. 应用内动…
阅读更多...
最新文章

Copyright @ 2022~2023