0

0

JavaScript Fetch API怎么用_与Ajax有什么区别【教程】

狼影

狼影

发布时间:2026-01-19 21:53:03

|

973人浏览过

|

来源于php中文网

原创

fetch api 是广义 ajax 的一部分,非 xmlhttprequest 替代品;它返回 promise 但不自动拒绝 4xx/5xx 错误,需手动检查 response.ok;post 传 json 需设 content-type 并 json.stringify;不支持同步请求、上传进度事件和内置超时,需 abortcontroller 实现。

javascript fetch api怎么用_与ajax有什么区别【教程】

Fetch API 不是 Ajax 的替代品,而是浏览器原生提供的、更现代的网络请求接口;它本身属于广义 Ajax(异步 JavaScript 和 XML)技术体系的一部分,只是不再依赖 XMLHttpRequest 对象。

fetch() 基本用法:GET 请求怎么写

最常用场景是发一个 GET 请求获取 JSON 数据。注意:fetch() 返回 Promise,但不会自动拒绝 HTTP 错误状态(如 404、500),这点和 jQuery.ajax() 行为不同。

  • fetch() 默认只 reject 网络错误(如断网、DNS 失败),不 reject 4xx/5xx 响应
  • 必须手动检查 response.okresponse.status 才能处理业务错误
  • 响应体需显式调用 response.json()response.text() 等方法读取,且只能读一次
fetch('/api/users')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error('Fetch failed:', err));

POST 请求传 JSON 数据要注意什么

发送 JSON 时,必须同时设置 Content-Type 请求头,并把 JS 对象转成字符串;否则后端很可能收不到或解析失败。

  • body 必须是字符串、FormDataBlob 等可序列化类型,不能直接传对象
  • headers 是普通对象,不是 Headers 实例(除非你主动 new)
  • 默认不带 cookie,跨域时需加 credentials: 'include'
fetch('/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ username: 'admin', password: '123' })
})
.then(r => r.json())
.catch(e => console.error(e));

fetch 和 XMLHttpRequest 最关键的三个区别

不是“谁更好”,而是设计哲学和默认行为不同。老项目迁移到 fetch 时,这几个点最容易出问题:

Dora
Dora

创建令人惊叹的3D动画网站,无需编写一行代码。

下载

立即学习Java免费学习笔记(深入)”;

  • XMLHttpRequest 支持同步请求(async: false),fetch() **完全不支持**,只能异步
  • fetch() 没有内置上传进度事件(upload.onprogress),要监听上传得用 FormData + 后端配合流式处理,或回退到 XMLHttpRequest
  • fetch() 的重定向行为默认是自动跟随(redirect: 'follow'),而 XMLHttpRequest 不会自动跳转,302 后需要手动处理 Location

实际开发中建议补什么

原生 fetch() 太简陋,生产环境几乎总会封装一层。至少补上三件事:

  • 统一错误处理逻辑(HTTP 状态码 + 网络异常 + JSON 解析失败)
  • 自动添加鉴权 token(比如从 localStorage 读 auth_token 放进 Authorization header)
  • 超时控制——fetch() 本身不支持 timeout,得用 AbortController 配合
const controller = new AbortController();
setTimeout(() => controller.abort(), 8000);

fetch('/api/data', { signal: controller.signal })
  .catch(err => {
    if (err.name === 'AbortError') {
      console.error('Request timed out');
    }
  });

真正麻烦的不是语法,而是每个项目都要重新决定:要不要重试?错误弹窗怎么统一?loading 状态怎么透出?这些都得自己搭,没有 $.ajaxSetup() 那种全局钩子。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

455

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

546

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

334

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

82

2025.09.10

jquery插件有哪些
jquery插件有哪些

jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容,供大家免费下载体验。

156

2023.09.12

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

334

2023.10.13

jquery删除元素的方法
jquery删除元素的方法

jquery可以通过.remove() 方法、 .detach() 方法、.empty() 方法、.unwrap() 方法、.replaceWith() 方法、.html('') 方法和.hide() 方法来删除元素。更多关于jquery相关的问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

406

2023.11.10

jQuery hover()方法的使用
jQuery hover()方法的使用

hover()是jQuery中一个常用的方法,它用于绑定两个事件处理函数,这两个函数将在鼠标指针进入和离开匹配的元素时执行。想了解更多hover()的相关内容,可以阅读本专题下面的文章。

515

2023.12.04

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

3

2026.03.11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号