FetchAPI发起AJAX请求教程

Fetch API 是现代 JavaScript 中发起网络请求的首选方案，它以简洁的 Promise 风格替代了繁琐的 XMLHttpRequest，支持 GET、POST 等多种请求方式，能轻松处理 JSON、表单数据和纯文本等常见格式；虽然需手动校验 HTTP 状态码（如 404/500），但结合 AbortController 可灵活实现超时控制与请求中止，大幅提升健壮性与用户体验——无论你是初学者还是资深开发者，掌握 Fetch 都将让你的异步数据交互更清晰、可靠且面向未来。

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

基本用法

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

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

处理响应状态

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

发送 POST 请求

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

注意设置 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。

今天关于《FetchAPI发起AJAX请求教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！