Fetch API 在 Web 开发中是如何工作的？

Fetch API 是一个现代 Web API，它提供了一种在 JavaScript 中发出网络请求的更灵活、更强大的方式。它是作为较旧的 XMLHttpRequest 技术的继任者而设计的，提供了基于 Promise 的更直观、更易读的语法。Fetch API 使得能够向服务器发出异步 HTTP 请求，并以更有条理的方式处理响应。

Fetch API 与 XMLHttpRequest 之间的一个重要区别，是 Fetch API 返回 Promise，这让处理异步代码变得更容易，而无需依赖回调函数。这会带来更整洁、更易于维护的代码，在按顺序处理多个异步操作时尤其如此。

此外，Fetch API 提供了一种更全面、更灵活的 HTTP 响应处理方式，包括更好地支持流式数据以及处理不同类型的内容。XMLHttpRequest 需要更多步骤来配置和处理请求，而 Fetch API 则能用更少的代码行和更现代的方式实现相同的结果。不过，XMLHttpRequest 仍然提供原生的上传进度事件，而 fetch 缺少这一功能。

XMLHttpRequest 可能更复杂、更不直观；相比之下，Fetch API 是一种更现代的解决方案，旨在满足以简单和高效为重点的当今 Web 开发需求。因此，Fetch API 是许多希望编写更高效、更面向未来的代码的开发者的首选。

JavaScript 中的 Fetch API 旨在通过返回一个 Promise 对象来处理异步操作，该对象代表一个将在未来完成的操作。发送 fetch 请求后，它会开始从网络获取资源，而 JavaScript 会在等待请求完成的同时继续执行其他任务。

fetch 请求完成后，相关的 Promise 对象要么被兑现，要么被拒绝。只要服务器返回响应，无论状态码如何，它都会被兑现；只有在请求失败时，例如由于网络错误或请求被中止，它才会被拒绝。这让开发者能够定义数据可用时应发生的操作，分别使用 .then() 和 .catch() 等方法来处理成功和失败，或者使用等效的 async/await 语法。这种异步模式让应用程序保持响应，并能够同时处理多项任务，而不会被网络请求阻塞。

XMLHttpRequest 等较旧的技术需要更复杂的异步处理；相比之下，Fetch API 为在 JavaScript 中处理网络请求提供了一种更现代、更精简的方式，让开发者更容易编写整洁且易于维护的代码。

Fetch API 结合了三项核心优势，为在 Web 应用程序中处理 HTTP 请求提供了一种现代高效的方式：

• 简化的语法：Fetch API 使用基于 Promise 的更现代、更易读的语法，这让代码比使用 XMLHttpRequest 等较旧的方法时更易于编写和理解。这降低了复杂性，并让代码更易于维护，因为无需回调函数即可处理异步操作。
• 内置支持现代功能：Fetch API 原生支持许多现代 Web 功能，例如流式数据、处理 CORS（Cross-Origin Resource Sharing，跨源资源共享）以及使用 AbortController 取消请求。这让开发者无需借助第三方库或复杂的变通方法，就能构建更高级、响应更灵敏的应用程序。
• 清晰区分错误类型：Fetch API 明确区分网络故障和 HTTP 错误响应。只有当请求本身失败时，Promise 才会被拒绝，而 404 或 500 等 HTTP 错误状态会作为普通响应返回，可以通过 response.ok 进行检查。XMLHttpRequest 的行为与此类似，但它通过单独的事件来发出错误信号，这让流程更难跟踪。

简化的语法、对现代功能的内置支持以及清晰的错误处理相结合，使 Fetch API 成为希望构建更高效、更易于维护的 Web 应用程序的开发者的强大工具。当需要拦截器和自动 JSON 转换等更多内置功能时，一些开发者会改用 Axios 库。

在 JavaScript 中使用 Fetch API 时，正确处理错误和异常对于打造稳健且用户友好的应用程序非常重要。以下是使用 Fetch API 时有效处理错误和异常的一些方法：

• 网络错误：Fetch API 返回的 Promise 只会在出现网络错误时被拒绝。这意味着必须使用 catch() 来处理网络连接出现问题的情况，例如无法访问服务器时。
• HTTP 状态码：Fetch API 不会将 HTTP 错误状态码（例如 404 或 500）视为错误。必须手动检查 response.ok，才能识别此类错误并进行适当处理。
• JSON 解析错误：将响应转换为 JSON 时，如果数据不是有效的 JSON，就可能出现解析错误。可以通过在 try-catch 块中等待 response.json() 来处理这种情况。
• 超时：Fetch API 本身没有超时选项。可以使用 AbortController 或 AbortSignal.timeout() 实现超时，它们会真正取消请求；而基于 Promise.race() 的方式只是停止等待结果，请求本身仍会继续。
• 用户反馈：为了改善用户体验，应在发生错误时向用户提供反馈，例如显示一条消息或一条说明问题及后续步骤的通知。

总体而言，在使用 Fetch API 时正确处理错误和异常，可以同时提升应用程序的稳定性和用户体验。实施这些方法有助于应用程序从容地应对意外问题。

要使用 Fetch API 发送数据，需要在调用 fetch() 时传入一个额外的选项对象。该对象用于设置方法，例如 POST 或 PUT，而数据则放在 body 字段中。

发送 JSON 时，需要使用 JSON.stringify() 将对象转换为文本，并将 Content-Type 标头设置为 application/json，以便服务器知道如何读取这些数据。表单数据和文件可以通过 FormData 对象发送，浏览器会自动将其作为 multipart/form-data 发送。响应的处理方式与其他调用相同，而检查响应的 ok 属性非常重要，因为 fetch 不会针对 400 或 500 等 HTTP 状态码引发错误。

Fetch API 是在 Web 应用程序中发出网络请求的一种现代灵活的方法，但在使用这项技术时需要注意安全事项。Fetch API 的设计简单直观，但它要求开发者负责确保正确处理发送和接收的数据，以防范潜在的安全威胁。

使用 Fetch API 时的主要安全事项之一，是处理 CORS（Cross-Origin Resource Sharing，跨源资源共享）。浏览器会对 fetch 应用同源策略，这意味着，向应用程序加载来源以外的其他源发出请求时，服务器必须发送正确的 CORS 标头，才能读取响应。CORS 是对同源策略的受控放宽，其本身并不是一种保护机制：过于宽松的配置可能会让资源暴露给未经授权的站点。防范跨站脚本攻击（XSS）和跨站请求伪造（CSRF）需要单独的措施，例如输出编码、内容安全策略、SameSite Cookie 和 CSRF 令牌。

此外，验证和清理通过 Fetch API 发送和接收的所有数据也非常重要。这包括确保用户输入不包含可能被利用来危害应用程序或其用户的恶意代码。验证也必须始终在服务器上进行，因为浏览器中的检查可能会被绕过。通过实施严格的验证和清理检查，开发者可以将安全漏洞的风险降至最低。

与 XMLHttpRequest 等较旧的技术相比，Fetch API 为网络请求提供了一种更现代的方式，但它仍然要求开发者注意安全实践。通过了解并实施必要的安全措施，开发者可以确保其应用程序稳健可靠，能够抵御潜在的威胁。