使用Fetch API进行网络请求_javascript ajax

Fetch API 提供简洁的 Promise 风格网络请求，支持 GET/POST 等方法，需手动检查响应状态，可结合 AbortController 实现超时控制，推荐用于现代 JavaScript 开发。

Fetch API 是现代 JavaScript 中用于发起网络请求的一种简洁、强大的方式。相比传统的 XMLHttpRequest，它使用 Promise 风格的语法，代码更清晰，也更容易处理异步操作。

基本用法

fetch() 函数接收一个 URL 或路径作为参数，默认发起 GET 请求，返回一个 Promise。

上面代码请求一个 JSON 接口，先调用 response.json() 将响应体解析为 JSON，再输出结果。

处理响应状态

fetch() 只有在网络错误时才会 reject Promise，HTTP 状态码如 404 或 500 不会自动触发错误。需要手动检查 response.ok 或 status。

立即学习“Java免费学习笔记（深入）”；

发送 POST 请求

通过配置 options 对象，可以发送 POST、PUT 等其他方法的请求。

行者AI

行者AI绘图创作，唤醒新的灵感，创造更多可能

100

查看详情

注意设置 Content-Type 头，确保服务器正确解析 JSON 数据。

处理常见格式

根据服务器要求，可以发送不同格式的数据：

• JSON：设置头为 application/json，body 使用 JSON.stringify()
• 表单数据：使用 FormData 对象，无需手动设头（浏览器自动加 boundary）
const formData = new FormData(); formData.append('name', 'Alice'); formData.append('file', fileInput.files[0]); fetch('/upload', { method: 'POST', body: formData });
• 纯文本：body 直接传字符串，可选设 text/plain 类型

错误处理与超时

fetch 不支持原生超时，但可以用 Promise.race 实现：

使用 AbortController 可主动中止请求，适合用户离开页面等场景。

基本上就这些。Fetch API 简洁易用，配合 async/await 更加流畅。现代开发中推荐优先使用 fetch 而非传统 Ajax。

以上就是使用Fetch API进行网络请求_javascript ajax的详细内容，更多请关注php中文网其它相关文章！