HTML5 新增Api ''Fetch Api'' (详细概括)

苟盛 苟盛 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 500+累计阅读 501平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄7年
关注
原创 最新推荐文章于 2026-07-07 19:30:21 发布 501 阅读 AI 写同款· GEO 优化 ›
HTML5 HTTP请求方式XMLHttpRequest API、Ajax及Fetch API 事件驱动：通过监听 .onreadystatechange 事件处理函数，可以捕获请求状态的变化，并在 .readyState 为 4（即请求已完成）时，通过 .responseText 或 .responseXML 获取响应数据。这打破了传统网页应用“提交表单→等待服务器响应→加载新页面”的模式，实现了页面的局部刷新和无刷新数据交互。跨域请求：通过 CORS（Cross-Origin Resource Sharing）机制，XMLHttpRequest 可以发起跨域请求，获取不同源服务器的数据。 阅读详情

Fetch Api 概述

XMLHttpRequest的问题

  1. 所有的功能全部集中在同一个对象上，容易书写出混乱不易维护的代码
  2. 采用传统的事件驱动模式，无法适配新的 Promise Api

Fetch Api 的特点

  1. 并非取代 AJAX，而是对 AJAX 传统 API 的改进
  2. 精细的功能分割：头部信息、请求信息、响应信息等均分布到不同的对象，更利于处理各种复杂的 AJAX 场景
  3. 使用 Promise Api，更利于异步代码的书写
  4. Fetch Api 并非 ES6 的内容，属于 HTML5 新增的 Web Api
  5. 需要掌握网络通信的知识

基本使用

请求测试地址：http://101.132.72.36:5100/api/local

使用 fetch函数即可立即向服务器发送网络请求

参数

该函数有两个参数：

  1. 必填，字符串，请求地址
  2. 选填，对象，请求配置

请求配置对象

  • method：字符串，请求方法，默认值GET
  • headers：对象，请求头信息
  • body: 请求体的内容，必须匹配请求头中的 Content-Type
  • mode：字符串，请求模式
    • cors：默认值，配置为该值，会在请求头中加入 origin 和 referer
    • no-cors：配置为该值，不会在请求头中加入 origin 和 referer，跨域的时候可能会出现问题
    • same-origin：指示请求必须在同一个域中发生，如果请求其他域，则会报错
  • credentials: 如何携带凭据（cookie）
    • omit：默认值，不携带cookie
    • same-origin：请求同源地址时携带cookie
    • include：请求任何地址都携带cookie
  • cache：配置缓存模式
    • default: 表示fetch请求之前将检查下http的缓存.
    • no-store: 表示fetch请求将完全忽略http缓存的存在. 这意味着请求之前将不再检查下http的缓存, 拿到响应后, 它也不会更新http缓存.
    • no-cache: 如果存在缓存, 那么fetch将发送一个条件查询request和一个正常的request, 拿到响应后, 它会更新http缓存.
    • reload: 表示fetch请求之前将忽略http缓存的存在, 但是请求拿到响应后, 它将主动更新http缓存.
    • force-cache: 表示fetch请求不顾一切的依赖缓存, 即使缓存过期了, 它依然从缓存中读取. 除非没有任何缓存, 那么它将发送一个正常的request.
    • only-if-cached: 表示fetch请求不顾一切的依赖缓存, 即使缓存过期了, 它依然从缓存中读取. 如果没有缓存, 它将抛出网络错误(该设置只在mode为”same-origin”时有效).

返回值

fetch 函数返回一个 Promise 对象

  • 当收到服务器的返回结果后，Promise 进入resolved状态，状态数据为 Response 对象
  • 当网络发生错误（或其他导致无法完成交互的错误）时，Promise 进入 rejected 状态，状态数据为错误信息

Response对象

  • ok：boolean，当响应消息码在200~299之间时为true，其他为false
  • status：number，响应的状态码
  • text()：用于处理文本格式的 Ajax 响应。它从响应中获取文本流，将其读完，然后返回一个被解决为 string 对象的 Promise。
  • blob()：用于处理二进制文件格式（比如图片或者电子表格）的 Ajax 响应。它读取文件的原始数据，一旦读取完整个文件，就返回一个被解决为 blob 对象的 Promise。
  • json()：用于处理 JSON 格式的 Ajax 的响应。它将 JSON 数据流转换为一个被解决为 JavaScript 对象的promise。
  • redirect()：可以用于重定向到另一个 URL。它会创建一个新的 Promise，以解决来自重定向的 URL 的响应。

Request 对象

除了使用基本的fetch方法，还可以通过创建一个Request对象来完成请求（实际上，fetch的内部会帮你创建一个Request对象）

new Request(url地址, 配置)

注意点：

尽量保证每次请求都是一个新的Request对象

Headers 对象

在Request和Response对象内部，会将传递的请求头对象，转换为Headers

Headers对象中的方法：

  • has(key)：检查请求头中是否存在指定的key值
  • get(key): 得到请求头中对应的key值
  • set(key, value)：修改对应的键值对
  • append(key, value)：添加对应的键值对
  • keys(): 得到所有的请求头键的集合
  • values(): 得到所有的请求头中的值的集合
  • entries(): 得到所有请求头中的键值对的集合

文件上传

流程：

  1. 客户端将文件数据发送给服务器
  2. 服务器保存上传的文件数据到服务器端
  3. 服务器响应给客户端一个文件访问地址

测试地址：http://101.132.72.36:5100/api/upload
键的名称（表单域名称）：imagefile

请求方法：POST
请求的表单格式：multipart/form-data
请求体中必须包含一个键值对，键的名称是服务器要求的名称，值是文件数据

HTML5中，JS仍然无法随意的获取文件数据，但是可以获取到input元素中，被用户选中的文件数据
可以利用HTML5提供的FormData构造函数来创建请求体

收录于
H5C3

当前文章被收录于：

H5C3
2 篇文章 0 人学习

aaa

订阅专栏 查看详情
标签
#http #html5 #前端 #api
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
封包(一)(雷电模拟器+ProxyDroid+查尔斯3.93+WPE) 自从换了工作就没有给大家分享一些干活，在加上陪伴自己的孩子没有时间更新文章了，这只能在晚上给大家写文档了，我最近在游戏公司上班，研究封包。我把这些东西都做成了笔记，我想有些东西是大家都想弄明白d ... 阅读详情

相关推荐

K-means在关键词聚类中的尝试

K-means在文本聚类中的尝试 K-means算法是无监督的聚类算法。它的算法思想是：先随机选取K个对象作为初始的聚类中心。然后计算每个对象与各个种子聚类中心之间的距离，把每个对象分配给距离它最近的聚类中心。聚类中心以及分配给它们的对象就代表一个聚类。一旦全部对象都被分配了，每个聚类的聚类中心会根据聚类中现有的对象被重新计算。 K-means算法的关键点在于： 初始k个聚类中心的选择 距离的计...

BigPig_LittleTail的博客 5573

前端项目 index.html 中发请求 fetch

前端项目 index.html 中发请求 fetch

weixin_45288172的博客 963

SPI模式下的SD卡读写，为什么你的数据总出错？详解时序与状态机避坑指南

本文深入探讨SPI模式下SD卡读写数据出错的根本原因，提供时序优化与状态机设计的实战指南。针对时钟周期计数、状态机跳转和忙检测等核心问题，详解命令时序细节、状态机同步策略及高级避坑技巧，帮助开发者提升SD卡在SPI模式下的稳定性和性能。

weixin_30514745的博客 261

HTML5 API fetch详解(如有细节纰漏, 欢迎指正)

Fetch API 回顾一下XMLHttpRequest的问题 所有的功能全部集中在一个对象上, 容易书写出混乱而且不容易维护的代码 采用传统的事件驱动模式, 无法适配新的 Promise api Fetch Api的特点 并非取代ajax, 而是对ajax传统api的改进 精细的功能分割: 头部信息, 请求信息, 响应信息等均分布到不同的对象, 更利于处理各种复杂的ajax场景 使用Pro...

前端攻城狮Dannis 3547

【软碟通 | UltraISO】刻录光盘教程（制作U盘启动盘）

前言 今天老师说办公室的电脑有点卡，让我给重新安装一个 Windows 7 系统。于是就用软碟通（UltraISO）在 U 盘上刻录了一个 Windows 7 镜像，然后给老师重装了系统。顺便把制作 U 盘启动盘的教程也分享给大家。 软件 UltraISO v9.7.1.3519：点击跳转（密码：dd2k） 教程 将 U 盘插到电脑上，然后鼠标右击选择格式化（制作启动盘必须格式化） 点击文件-打开 选择下载好的系统镜像（如：Windows 7） 点击启动-写入硬盘映像 选择硬盘

XavierJ的博客 2万+

从零到一：使用阿里云百炼搭建企业级 AI Agent 完全实战手册（2026超详细版）

本文是一份企业级AI Agent构建手册，主要面向企业技术负责人、AI产品经理和后端开发工程师。手册详细介绍了如何在阿里云百炼平台上搭建企业智能体应用的全流程，包括环境准备、知识库构建、智能体创建、工具集成、工作流编排等核心环节。重点内容包括： 准备工作：阿里云账号注册、百炼服务开通、免费额度领取、API Key管理 知识库构建：文档格式要求、内容优化原则、RAG系统搭建 智能体开发：Agent创建、工具集成、复杂业务工作流设计 生产部署：多渠道接入、监控运维、安全治理 成本控制：Token预算管理、选型决

u010323587的专栏 1087

fetch请求html页面,【Fetch API 实用指南】如何使用 Fetch API 执行 HTTP 请求

在本指南中，我将向您展示如何使用 Fetch API(ES6+)执行对 REST API 的 HTTP请求，并提供给你最有可能遇到的一些实际示例。想快速查看 HTTP 示例？ 请直接跳到第5节。第一部分描述了 JavaScript 的异步特性。注意：所有示例均通过 ES6 的箭头函数实现。当今的 Web/移动端应用程序中的一种常见模式是从服务器请求，然后显示某些数据(例如用户，帖子，评论，订阅，付...

weixin_30436581的博客 1346

Camera（5）metadata

Metadata 是整个 Android camera 中类似于高楼大厦中的管道系统一样，贯穿了整个 Camera 的 Framework 和 vendor HAL。Metadata 里面包含了所有的控制、参数、返回值等等。Metadata分为Android原生的Metadata和芯片商或者用户自定义的Metadata，即Android Tag和Vendor Tag。Vendor Tag在Hal中定义，并在camx和chi目录中使用。

qq_55893245的博客 3052

fetch请求html页面,html自带的fetch 异步请求 api

最简单的fetchAPI调用如下：fetch('https://api.github.com/users/chriscoyier/repos').then(response => response.json()).then(data => {// data就是我们请求的数据console.log(data)});fetch兼容性问题：可以用下面两行代码解决兼容性{% codeblock...

weixin_42509708的博客 854

终端里藏了个AI大神！DeepSeek‑TUI让你的命令行直接起飞

DeepSeek-TUI：终端AI编程神器 DeepSeek-TUI是一款专为开发者设计的终端AI编程工具，基于DeepSeek V4模型，提供100万Token超大上下文支持，适合处理复杂项目。其核心优势包括： 轻量高效：单二进制文件，无需依赖环境，支持SSH远程操作 智能交互：实时流式输出推理过程，支持三档模式（Plan/Agent/YOLO）灵活切换 强大功能：集成文件读写、Git管理、Shell执行等工具，支持一键回滚和持久会话 节省成本：智能压缩与缓存优化，显著降低Token消耗 适用于服务器开发

961

Android功耗系列专题理论之二十一：Power Monitor测功耗详细说明和注意事项

本文详细介绍了PowerMonitor手机功耗测试仪的功能与使用方法。该设备通过硬件连接替代手机电池，实时监测电流、电压等参数，适用于研发测试、软件优化等场景。文章包含设备接线说明（电源、USB、手机供电等接口）、驱动安装步骤及常见问题排查，并详细讲解了功耗测量操作流程，包括电压设置、开机步骤、数据采集与导出方法。特别强调了测量注意事项，如固定屏幕亮度、关闭后台应用、确保稳定连接等，以确保测试数据准确性。最后提供了简易测量步骤和详细测量流程指导。

596

fetch 请求详解

转载：前后端数据交互(四)——fetch 请求详解 - 前端人 - 博客园 fetch 是 XMLHttpRequest 的升级版，使用js脚本发出网络请求，但是与 XMLHttpRequest 不同的是，fetch 方式使用 Promise，相比 XMLHttpRequest 更加简洁。所以我们告别XMLHttpRequest，引入 fetch 如何使用？ 一、fetch介绍 fetch() 是一个全局方法，提供一种简单，合理的方式跨网络获取资源。它的请求是基于 Promise 的，需要详细学习 P

weichushun的专栏 3万+

基于Python的军事装备信息爬虫实战：Scrapy+Playwright+智能反反爬技术

本文将详细介绍如何使用Python构建一个高效的军事装备信息爬虫系统。我们将从基础的HTTP请求开始，逐步深入到使用Scrapy框架、Playwright浏览器自动化以及最新的反反爬技术。文章包含完整的代码实现、性能优化策略以及数据处理方案，旨在为读者提供一个全面的军事信息爬取解决方案。关键词：Python爬虫、军事装备、Scrapy、Playwright、反反爬。

2201_76125261的博客 1155

如何让Stremio变身全能影视库：Torrentio智能资源聚合实战

想象一下，你的流媒体平台能够像一位经验丰富的探险家，在浩瀚的互联网海洋中为你精准打捞最高清的影视资源。这就是Torrentio为Stremio带来的魔法——它不仅仅是一个插件，更是连接你与海量影视内容的智能桥梁。让我们一起探索这个让Stremio焕然一新的工具，看看它如何重新定义你的观影体验。 ## 从零到一：搭建你的私人影视搜索舰队 要启动这个强大的资源聚合引擎，你需要先搭建自己的运行环境。

gitblog_00092的博客 559

android 蓝牙通讯demo

android 下蓝牙通讯demo，实现了发现蓝牙，使能蓝牙，通过蓝牙发送消息。

OV9734 DATASHEET，完整规格书

OV9734完整规格书，包括电气参数，尺寸规格，寄存器配置表等

在html中使用fetch实现GET和POST请求

在html中使用fetch实现GET和POST请求

easydvlp的博客 5548

Camera2Demo

在Camera2 的基础上进行封装，使得Camera2一堆初始化逻辑与Activity分离，降低耦合度，完成预览拍照并保存的操作

HTML5中的Fetch API是什么？它有什么用途？底层原理是什么？

此外，Fetch API 还可以与其他新的 Web 技术结合使用，例如 Service Worker 和 Promise 等，从而实现更多的功能和更好的用户体验。Fetch API 还支持使用 Request 对象来自定义请求头、请求方法、请求体等信息，同时也可以使用 Response 对象来获取响应头、响应状态等信息。网络缓存：Fetch API 可以与 Service Worker API 结合使用，实现对网络请求结果的缓存，从而提高页面的性能和用户体验。

长风破浪会有时的博客 1084

假人有限元模型

假人模型，车辆碰撞假人有限元模型，适合做乘员安全的研究者利用

h5 fetch的 原理 使用 学习总结

==================Fetch 简介 =========================== XMLHttpRequest 的问题 1. 所有的功能全部集中在同一个对象上,容易书写出混乱不易维护的代码 2. 采用传统的事件驱动模式,无法适配新的 Promise Api Fetch Api 的特点 1. 并非取代 AJAX, 而是对 AJAX传统的 API 2. 精细的功能分隔: 头部信息,...

twinkle的博客 899

Fetch API 入门：快速掌握 Web 请求的基础

Fetch API 提供了一个 JavaScript 接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它也提供了一个全局fetch()方法，该方法提供了一种简单、合乎逻辑的方式来跨网络异步获取资源。基于 Promise 的接口：Fetch 返回的是 Promise 对象，使得异步操作更加方便。更加灵活和功能强大：支持 Service Workers, Request/Response 对象等。清晰的 API 设计。

nhb687096的博客 747

html自定义标签模板,javascript – 模板与HTML自定义元素的使用

我刚刚开始学习HTML自定义元素,并通过阅读一系列介绍,教程和文档,我认为我对它的工作方式有很好的处理,但我对使用或不使用的正确方法有一个哲学问题标签.自定义元素使您能够封装新功能,简化HTML文档的结构,并允许您简单地插入< my-custom-element> …< / my-custom-element>标记而不是< div class =“my-custom-...

weixin_39782752的博客 2487

h5的fetch方法_HTML5 fetch API

介绍fetch是传统XMLHttpRequest(也就是常说的ajax)的替代者，相比后者，它更简单，并且内置对Promise的支持。但其实话说回来，我至今没太搞明白它的更多优点，因为说它使用简单好像体现不出优势，因为我们平时都是使用ajax框架的(比如jQuery)，很少会直接使用原生XMLHttpRequest，而且用了它的话还要担心兼容性的问题。语法语法很简单：fetch(url, conf...

weixin_39535701的博客 925

html5 fetch API 的原理

1、说明 fetch是基于原生的XMLHttpRequest对象来实现数据请求的。 同时，fetch也是基于Promise实现链式调用的。 那么，实现fetch的本质：就是实现ajax的封装以及Promise的实现。 2、ajax的封装 在原生的api中，XMLHttpRequest对象是封装ajax的核心。 其最简单的封装步骤如下： function ajax(url,suc,fail) { var xhr = new XMLHttpRequest(); xhr.open('GET',url,

u013594477的专栏 545

h5的fetch方法_关于h5中的fetch方法解读

1. 前言既然是h5的新方法,肯定就有一些比较older的浏览器不支持了,对于那些不支持此方法的浏览器就需要额外的添加一个polyfill:[链接]: https://github.com/fis-components/whatwg-fetch2. 用法ferch(抓取) :HTML:fetch('/users.html') //这里返回的是一个Promise对象,不支持的浏览器需要相应的ploy...

weixin_39816362的博客 301

HTML5 教程第16节：HTML5 新增 API（WebSocket / Fetch）

本文摘要总结了HTML5新增的WebSocket和Fetch API两大核心技术要点。WebSocket部分介绍了其全双工通信特性、连接创建方法、事件处理机制及数据收发方式。Fetch API部分详细讲解了如何替代传统XMLHttpRequest进行网络请求，包括基础用法、配置选项和async/await异步处理模式。此外还涵盖了Headers、Request、Response等核心接口的使用方法，以及跨域问题的CORS解决方案。文章最后针对常见面试场景，列举了10大高频面试题，帮助开发者快速掌握

silverclayz的技术分享 1272

HTML5 文件上传的2种方式

参考文章：http://blog.ncmem.com/wordpress/2023/12/26/html5-%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e7%9a%842%e7%a7%8d%e6%96%b9%e5%bc%8f/HTML5方式上传文件，可以通过使用FormData类模拟Form表单提交，从而实现无刷新上传文件。1、XMLHttpRequest（有进度事件）2、Fetch API（目前不支持进度事件）以前上传文件需要提交Form表单。假设有一个文件选择框。

weixin_45525177的博客 311

fetch，前端 面试题

同一个网站兼容不同的大小的设备。如PC端、移动端（平板、横屏、竖排）的显示风格。需要用到的技术Media Query（媒体查询）用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸，是否可触摸，屏幕精度，横屏竖屏等信息。使用em或rem做尺寸单位:用于文字大小的响应和弹性布局。禁止页面缩放屏幕尺寸响应a) 固定布局：页面居中，两边留白，他能适应大于某个值一定范围的宽度，但是如果太宽就会有很多留白，太窄会出现滚动条，在PC页面上很常见。

qq_44482764的博客 1646
上一篇： ES6 Promise基本使用，串联，其他API（详解）
下一篇： ES6 迭代器 可迭代协议 与 for-of 循环 (详解)
点赞 0
评论 0
书签 书签 0
苟盛
苟盛
博客等级 码龄7年 13粉丝 34原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值