当前位置： 首页 > news >正文

[JS]认识feach

news 2026/5/21 7:58:34

介绍

feach是浏览器内置的api, 用于发送网络请求

请求方式对比

  1. AJAX: 基于XMLHttpRequest接收请求, 使用繁琐
  2. Axios: 基于Promise的请求客户端, 在浏览器和node中均可使用, 使用简单
  3. fetch: 浏览器内置的api, 基于Promise, 功能简单

基础语法

<body><button>发请求</button><script>document.querySelector('button').addEventListener('click',async function(){// 1.构建查询参数const search = new URLSearchParams({pname: '广东省', cname:'深圳市'}).toString()// 2.发请网络请求 (默认get)const res = await fetch('http://hmajax.itheima.net/api/area?'+ search)// 3.判断请求状态if(res.status >= 200 && res.status < 300) {// 4.获取成功结果 (返回promise)const data = await res.json()console.log(data);} else {// 5.处理请求错误console.log(res.status);}})</script>
</body>

提交表单

<body><!--选择图片 --><input type="file" ><!-- 回显图片 --><img src="" alt=""><script>document.querySelector('input').addEventListener('change', async function(){// 1.准备表单数据const file = this.files[0]const data = new FormData()data.append('img', file)// 2.发起网络请求 (自动设置请求头)const res = await fetch('http://hmajax.itheima.net/api/uploadimg', {method: 'POST',body: data})// 3.判断请求状态if(res.status >=200 && res.status <300) {const { data } = await res.json()console.log(data);// 4.回显图片document.querySelector('img').src = data.url} else {// 5.处理失败console.log('请求失败', res.status);}})</script>
</body>

提交JSON

<body><button>提交表单数据</button><script>document.querySelector('button').addEventListener('click',async function(){// 1.实例化Headerw对象const headers = new Headers()// 2.设置请求头headers.append('content-type','application/json')// 3.发起请求const res = await fetch('http://hmajax.itheima.net/api/register',{method:'POST',headers,body: JSON.stringify({username: 'itheima7777',password:'123456'})})// 4.处理请求结果if(res.status >=200 && res.status <300) {const data = await res.json()console.log(data)}})</script>
</body>

兼容性

如果需要兼容ie 10+, 可以使用 promise-polyfill 和 whatwg-fetch 两个库做兼容处理

相关文章：

[JS]认识feach

介绍 feach是浏览器内置的api, 用于发送网络请求 请求方式对比 AJAX: 基于XMLHttpRequest接收请求, 使用繁琐Axios: 基于Promise的请求客户端, 在浏览器和node中均可使用, 使用简单fetch: 浏览器内置的api, 基于Promise, 功能简单 基础语法 <body><button>发请求…...

编程日记 2024/7/17 19:41:21

tomcat如何进行调优？

从两个方面考虑&#xff1a;内存和线程 首先启动Tomcat&#xff0c;实际上就是启动了一个JVM&#xff0c;所以可以按JVM调优的方式来进行调整&#xff0c;从而达到Tomcat优化的目的。 另外Tomcat中设计了一些缓存区&#xff0c;比如appReadBufSize、bufferPoolSize等缓存区来提…...

编程日记 2024/7/17 19:40:20

复现GMM文章（一）：图1代码和数据

介绍 复现GMM文章的的Fig1图。 加载R包 library(tidyr)library(tidyverse)library(dplyr)library(ggsci)library(ggpubr)导入数据 所有的数据可以通过下列链接下载&#xff1a; 百度网盘链接: https://pan.baidu.com/s/1isKEK1G5I6X90KYqLufmWw 提取码: t9ca 图1B 数据 …...

编程日记 2024/7/17 19:39:19

链接追踪系列-07.logstash安装json_lines插件

进入docker中的logstash 容器内&#xff1a; jelexbogon ~ % docker exec -it 7ee8960c99a31e607f346b2802419b8b819cc860863bc283cb7483bc03ba1420 /bin/sh $ pwd /usr/share/logstash $ ls bin CONTRIBUTORS Gemfile jdk logstash-core modules tools x-pack …...

编程日记 2024/7/17 19:38:18

火山引擎数据飞轮实践：在电商场景中，如何建设全链路数据血缘？

数据作为新型生产要素&#xff0c;正支撑企业的数智化转型。但企业数字化建设也存在管理成本高、数据产品使用门槛高、数据资产价值不够的问题&#xff0c;其原因在于业务和数据之间没有形成双向良性驱动。 结合新时代企业数字化转型需求&#xff0c;火山引擎基于字节跳动十余…...

编程日记 2024/7/17 19:37:16

使用加密软件对企业来说有什么好处

泄密时间近年来层出不穷&#xff0c;一旦重要文件或数据被盗&#xff0c;无疑会对企业带来巨大的损失。 2024年3月&#xff0c;我国某高新科技企业遭境外黑客攻击&#xff0c;相关信息化系统及数据被加密锁定&#xff0c;生产经营活动被迫停止。企业生产经营活动受阻&#xff…...

编程日记 2024/7/17 19:30:10

STM32入门开发操作记录（二）——LED与蜂鸣器

目录 一、工程模板二、点亮主板1. 配置寄存器2. 调用库函数 三、LED1. 闪烁2. 流水灯 四、蜂鸣器 一、工程模板 参照第一篇&#xff0c;新建工程目录ProjectMould&#xff0c;将先前打包好的Start&#xff0c;Library和User文件^C^V过来&#xff0c;并在Keil5内完成器件支持包的…...

编程日记 2024/7/17 19:29:09

n3.平滑升级和回滚

平滑升级和回滚 1. 平滑升级流程2. 平滑升级和回滚案例 有时候我们需要对Nginx版本进行升级以满足对其功能的需求&#xff0c;例如添加新模块&#xff0c;需要新功能&#xff0c;而此时 Nginx又在跑着业务无法停掉&#xff0c;这时我们就可能选择平滑升级 1. 平滑升级流程 平…...

编程日记 2024/7/17 19:28:08

C#WPF DialogHost.Show 弹出对话框并返回数据

在WPF中，使用DialogHost.Show方法显示一个对话框并获取返回数据，你需要定义一个对话框，并在对话框关闭时返回数据。以下是一个简单的例子： 首先，在主窗口中添加DialogHost控件： <MaterialDesign:DialogHost x:Name="dialogHost" /> 然后，创建一个对话…...

编程日记 2024/7/17 19:27:07

Kafka Producer发送消息流程之分区器和数据收集器

文章目录 1. Partitioner分区器2. 自定义分区器3. RecordAccumulator数据收集器 1. Partitioner分区器 clients/src/main/java/org/apache/kafka/clients/producer/KafkaProducer.java&#xff0c;中doSend方法&#xff0c;记录了生产者将消息发送的流程&#xff0c;其中有一步…...

编程日记 2024/7/17 19:26:06

Codeforces Round 958 (Div. 2)

C o d e f o r c e s R o u n d 958 ( D i v . 2 ) \Huge{Codeforces Round 958 (Div. 2)} CodeforcesRound958(Div.2) 文章目录 Problems A. Split the Multiset题意思路标程 Problems B. Make Majority题意思路标程 Problems C. Increasing Sequence with Fixed OR题意思路标…...

编程日记 2024/7/17 19:25:04

＜数据集＞猫狗识别数据集＜目标检测＞

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;3686张 标注数量(xml文件个数)&#xff1a;3686 标注数量(txt文件个数)&#xff1a;3686 标注类别数&#xff1a;2 标注类别名称&#xff1a;[cat, dog] 序号类别名称图片数框数1cat118811892dog24982498 使用标…...

编程日记 2024/7/17 19:23:02

Figma 中文版指南：获取和安装汉化插件

Figma是一种主流的在线团队合作设计工具&#xff0c;也是一种基于 Web 端的设计工具。在当今的设计时代&#xff0c;Figma 的使用满足了每个人的设计需求&#xff0c;不仅可以实现在线编辑&#xff0c;还可以方便日常管理&#xff0c;有效提高工作效率。然而&#xff0c;相信很…...

编程日记 2024/7/17 19:18:59

用c语言写一个贪吃蛇游戏

贪吃蛇游戏通常涉及到终端图形编程和简单的游戏逻辑。以下是一个基本的实现示例&#xff0c;包括贪吃蛇的移动、食物生成、碰撞检测等功能。 1. 贪吃蛇游戏的基本结构 贪吃蛇游戏可以分为以下几个部分&#xff1a; 游戏地图和终端绘制&#xff1a;使用二维数组表示游戏地图&am…...

编程日记 2024/7/17 19:15:56

计算机网络入门 --网络模型

计算机网络入门 --网络模型 1.OSI七层模型 1.1 模型概念 OSI七层模型是将计算机网络通信协议划分为七个不同层次的标准化框架&#xff0c;每一层都负责不同功能&#xff0c;并从物理连接层开始处理。OSI七层网络模型如下分别为&#xff1a;物理层、数据链路层、网络层、传输…...

编程日记 2024/7/17 19:14:55

陪玩系统小程序模式APP小程序H5系统搭建开发

随着移动互联网的营及和游戏行业的蓬轨发展&#xff0c;陪玩服务应远而生并迅速唱起&#xff0c;陪玩系统小程序作为连接游戏玩家与陪玩师的桥梁&#xff0c;其模式系统的搭建与开发是得尤为重要&#xff0c;本文将洋细凰述陪玩系统小程宗模式系统的搭建开发流程&#xff0c;包…...

编程日记 2024/7/17 19:09:49

算法训练营day72

题目&#xff1a;117. 软件构建 (kamacoder.com) #include<iostream> #include<unordered_map> #include<vector> #include<queue>using namespace std;int main() {int n, m;cin >> n >> m;vector<int> indegree(n, 0);unordered_…...

编程日记 2024/7/17 19:08:48

C语言------指针讲解(2)

目录 一、数组名的理解 二、使用指针访问数组 三、一维数组传参的本质 四、冒泡排序 五、二级指针 六、指针数组 七、指针数组模拟二维数组 一、数组名的理解 通过学习&#xff0c;我们知道&#xff1a;数组名和数组首元素的地址打印出来的结果一模一样&#xff0c;数组…...

编程日记 2024/7/17 19:07:46

大数据技术基础

一、大数据平台 1.大数据平台方案步骤&#xff1a; ①市场上有哪些大数据平台 ②硬件、系统、业务增长等方面 ③方案是否通过 通过后&#xff1a;按照一期目标投入 先虚拟环境部署联系&#xff0c;再实际部署 《大数据架构介绍》《Hadoop架构解析》《Hadoop集群规划》 《H…...

编程日记 2024/7/17 19:04:43

【文心智能体】前几天百度热搜有一条非常有趣的话题《00后疯感工牌》，看看如何通过低代码工作流方式实现图片显示

00后疯感工牌体验&#xff1a;https://mbd.baidu.com/ma/s/6yA90qtM 目录 前言比赛推荐工作流创建工作流入口创建工作流界面工作流界面HTTP工具卡点地方 总结推荐文章 前言 前几天百度热搜有一条非常有有趣《00后疯感工牌》。 想着通过文心智能体去一键生成00后疯感工牌是不是…...

编程日记 2024/7/17 19:02:42

手把手教你用STC89C52和DS1302做一个带按键调节的电子时钟（附完整代码）

从零打造可调式电子时钟&#xff1a;STC89C52与DS1302实战指南 在创客和电子爱好者的世界里&#xff0c;能够亲手制作一个功能完整的电子时钟&#xff0c;无疑是检验单片机编程和硬件连接能力的绝佳项目。本文将带你使用STC89C52单片机和DS1302实时时钟芯片&#xff0c;配合LCD…...

编程新知 2026/5/21 7:37:16

轻松健康任命游木聪为CFO

雷递网 乐天 5月20日轻松健康集团&#xff08;股份代码&#xff1a;2661&#xff09;日前发布公告&#xff0c;宣布任命游木聪为公司CFO&#xff0c;自2026年5月18日起生效。资料显示&#xff0c;游木聪现年48岁&#xff0c;在财务规划、战略投资及M&A方面具有丰富经验。游…...

编程新知 2026/5/21 6:58:16

手把手教你用W25Q32 SPI Flash：从波形图看懂擦除、写入和读取（附完整代码）

手把手教你用W25Q32 SPI Flash&#xff1a;从波形图看懂擦除、写入和读取&#xff08;附完整代码&#xff09; 在嵌入式开发中&#xff0c;SPI Flash存储器因其高性价比、大容量和简单接口而广受欢迎。W25Q32作为一款32Mb的SPI Flash芯片&#xff0c;被广泛应用于物联网设备、消…...

编程新知 2026/5/21 6:34:43

别再只会真彩色了！用ENVI玩转波段组合：揭秘植被红、水体蓝背后的遥感密码

遥感图像解译的艺术&#xff1a;ENVI波段组合背后的科学密码 当一张卫星遥感图像首次展现在眼前时&#xff0c;未经训练的眼睛往往只能看到一片模糊的色块。然而&#xff0c;对于掌握波段组合奥秘的解译专家来说&#xff0c;这些色彩背后隐藏着丰富的地表信息——健康的植被、水…...

编程新知 2026/5/21 6:15:32

保姆级教程：用PlatformIO给ESP32刷Marlin固件，搞定WiFi配置和Web界面

从零构建3D打印机无线中枢&#xff1a;ESP32刷写Marlin固件全流程解析 当你的3D打印机突然摆脱数据线的束缚&#xff0c;通过手机就能随时监控打印进度、调整参数时&#xff0c;那种科技带来的愉悦感会瞬间抵消所有配置过程的艰辛。本文将带你用ESP32开发板打造专属无线控制模块…...

编程新知 2026/5/21 5:23:25

GTA5终极防护与增强指南：YimMenu完整使用教程

GTA5终极防护与增强指南&#xff1a;YimMenu完整使用教程 【免费下载链接】YimMenu YimMenu, a GTA V menu protecting against a wide ranges of the public crashes and improving the overall experience. 项目地址: https://gitcode.com/GitHub_Trending/yi/YimMenu …...

编程新知 2026/5/21 4:57:40

Show-o多模态理解：图像描述和视觉问答的终极解决方案

Show-o多模态理解&#xff1a;图像描述和视觉问答的终极解决方案 【免费下载链接】Show-o [ICLR & NeurIPS 2025] Repository for Show-o series, One Single Transformer to Unify Multimodal Understanding and Generation. 项目地址: https://gitcode.com/gh_mirrors/…...

编程新知 2026/5/21 4:18:35

别只当题做！我把CTFshow Web信息搜集题（11-20）变成了真实漏洞挖掘指南

从CTF到实战&#xff1a;Web信息泄露漏洞的企业级攻防指南 当CTF技巧遇上真实世界 深夜两点&#xff0c;某电商平台的安全工程师收到告警——核心数据库正在被异常下载。溯源发现&#xff0c;攻击者竟是通过一个被遗忘的测试接口获取了服务器目录遍历权限。这个场景与CTFshow W…...

编程新知 2026/5/21 1:38:06

孩子总是注意力不集中，感统训练有没有必要做？

​绝大多数情况下没有必要。注意力不集中的根源很少是感觉统合失调&#xff0c;感统训练对此基本无效。只有当孩子经过专业评估&#xff0c;被明确诊断为感觉统合失调&#xff0c;且注意力问题确实由感觉处理混乱引起时&#xff0c;才值得考虑&#xff0c;但效果也有限。感统训…...

编程新知 2026/5/20 22:38:32

Spring Boot 做 RAG 文档上传：1GB 文件会不会打爆内存？

做 RAG 系统时&#xff0c;文档上传很容易被低估。 普通系统里&#xff0c;上传文件可能只是保存附件。但在 RAG 里&#xff0c;上传只是第一步&#xff0c;后面通常还有&#xff1a; 上传文档 -> 保存文件 -> 解析文本 -> 文本分片 -> 生成 embedding -> 写入…...

编程新知 2026/5/20 22:29:38