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

[JS]认识feach

news 2026/4/1 19:14:51

介绍

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

YOLOv8 Face：从技术原理到生产级人脸检测系统构建指南

YOLOv8 Face&#xff1a;从技术原理到生产级人脸检测系统构建指南 【免费下载链接】yolo-face YOLO Face &#x1f680; in PyTorch 项目地址: https://gitcode.com/gh_mirrors/yo/yolo-face 在当今计算机视觉领域&#xff0c;实时人脸检测技术已成为智能交互、安全监控…...

编程新知 2026/4/1 18:27:47

W25Q64 进阶应用：从电路设计到高效存储管理的实战解析

1. W25Q64硬件电路设计实战 第一次用W25Q64做项目时&#xff0c;我在电路设计上踩过不少坑。记得有个设备频繁出现数据丢失&#xff0c;最后发现是电源滤波没做好。这个8MB容量的SPI Flash芯片虽然引脚不多&#xff0c;但每个脚的设计细节都直接影响系统稳定性。 1.1 关键引脚…...

编程新知 2026/4/1 16:02:33

VLN性能飙升的秘密：手把手拆解JanusVLN的‘记忆宫殿’与KV缓存增量更新机制

VLN性能飙升的工程密码&#xff1a;JanusVLN混合缓存与增量更新机制深度解析 视觉语言导航&#xff08;VLN&#xff09;技术正面临一个关键瓶颈——随着导航路径延长&#xff0c;系统需要处理的视觉帧数量呈线性增长&#xff0c;导致计算资源消耗急剧上升。传统方法要么反复处理…...

编程新知 2026/4/1 15:05:30

图的存储方式详解（邻接矩阵 + 邻接表）| 算法入门必看

在算法学习中，图是仅次于树的核心数据结构，广泛应用于路径规划、网络拓扑、社交关系等场景。而图的存储是后续图论算法（DFS、BFS、最短路等）的基础——选择合适的存储方式，能直接影响算法的时间和空间效率。 本文将详细讲解图的两种最常用存储方式：邻接矩阵和邻接表，从…...

编程新知 2026/4/1 15:03:28

15分钟掌握OpenShamrock：基于Xposed的OneBot QQ机器人实战指南

15分钟掌握OpenShamrock&#xff1a;基于Xposed的OneBot QQ机器人实战指南 【免费下载链接】OpenShamrock A Bot Framework based on Xposed with OneBot11 项目地址: https://gitcode.com/gh_mirrors/op/OpenShamrock 开篇亮点展示 OpenShamrock是一款基于LSPosed框架…...

编程新知 2026/4/1 13:51:30

5大核心功能深度解析：Umi-OCR开源离线文字识别工具的技术实现与应用指南

5大核心功能深度解析&#xff1a;Umi-OCR开源离线文字识别工具的技术实现与应用指南 【免费下载链接】Umi-OCR OCR software, free and offline. 开源、免费的离线OCR软件。支持截屏/批量导入图片&#xff0c;PDF文档识别&#xff0c;排除水印/页眉页脚&#xff0c;扫描/生成二…...

编程新知 2026/4/1 13:10:45

Fluent Meshing体网格生成失败？别慌，先检查你的几何模型是不是‘点接触’了

Fluent Meshing体网格生成失败&#xff1f;别慌&#xff0c;先检查你的几何模型是不是‘点接触’了 当你在Fluent Meshing中看到体网格生成失败的红色报错提示时&#xff0c;那种感觉就像考试时突然发现漏做了一整页题目。特别是当截止日期迫在眉睫&#xff0c;这种报错往往让人…...

编程新知 2026/4/1 12:58:29

Local SDXL-Turbo保姆级教程：导出为ONNX格式进一步优化推理速度

Local SDXL-Turbo保姆级教程&#xff1a;导出为ONNX格式进一步优化推理速度 1. 引言&#xff1a;为什么需要导出ONNX&#xff1f; 如果你已经体验过Local SDXL-Turbo那“打字即出图”的畅快感&#xff0c;可能会想&#xff1a;这速度已经很快了&#xff0c;还能不能再快一点&…...

编程新知 2026/4/1 10:26:50

DeepSeek-Coder-V2-Lite-Instruct社区成功案例：开发者如何用AI助手实现项目突破

DeepSeek-Coder-V2-Lite-Instruct社区成功案例&#xff1a;开发者如何用AI助手实现项目突破 【免费下载链接】DeepSeek-Coder-V2-Lite-Instruct 开源代码智能利器——DeepSeek-Coder-V2&#xff0c;性能比肩GPT4-Turbo&#xff0c;全面支持338种编程语言&#xff0c;128K超长上…...

编程新知 2026/4/1 10:00:28

抖音音频高效提取工具：从繁琐操作到一键解决方案

抖音音频高效提取工具&#xff1a;从繁琐操作到一键解决方案 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support. 抖…...

编程新知 2026/4/1 9:40:07