[JS]认识feach
介绍
feach是浏览器内置的api, 用于发送网络请求
请求方式对比
- AJAX: 基于XMLHttpRequest接收请求, 使用繁琐
- Axios: 基于Promise的请求客户端, 在浏览器和node中均可使用, 使用简单
- 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>发请求…...
tomcat如何进行调优？
从两个方面考虑：内存和线程 首先启动Tomcat，实际上就是启动了一个JVM，所以可以按JVM调优的方式来进行调整，从而达到Tomcat优化的目的。 另外Tomcat中设计了一些缓存区，比如appReadBufSize、bufferPoolSize等缓存区来提…...
复现GMM文章（一）：图1代码和数据
介绍 复现GMM文章的的Fig1图。 加载R包 library(tidyr)library(tidyverse)library(dplyr)library(ggsci)library(ggpubr)导入数据 所有的数据可以通过下列链接下载： 百度网盘链接: https://pan.baidu.com/s/1isKEK1G5I6X90KYqLufmWw 提取码: t9ca 图1B 数据 …...
链接追踪系列-07.logstash安装json_lines插件
进入docker中的logstash 容器内： jelexbogon ~ % docker exec -it 7ee8960c99a31e607f346b2802419b8b819cc860863bc283cb7483bc03ba1420 /bin/sh $ pwd /usr/share/logstash $ ls bin CONTRIBUTORS Gemfile jdk logstash-core modules tools x-pack …...
火山引擎数据飞轮实践：在电商场景中，如何建设全链路数据血缘？
数据作为新型生产要素，正支撑企业的数智化转型。但企业数字化建设也存在管理成本高、数据产品使用门槛高、数据资产价值不够的问题，其原因在于业务和数据之间没有形成双向良性驱动。 结合新时代企业数字化转型需求，火山引擎基于字节跳动十余…...
使用加密软件对企业来说有什么好处
泄密时间近年来层出不穷，一旦重要文件或数据被盗，无疑会对企业带来巨大的损失。 2024年3月，我国某高新科技企业遭境外黑客攻击，相关信息化系统及数据被加密锁定，生产经营活动被迫停止。企业生产经营活动受阻ÿ…...
STM32入门开发操作记录（二）——LED与蜂鸣器
目录 一、工程模板二、点亮主板1. 配置寄存器2. 调用库函数 三、LED1. 闪烁2. 流水灯 四、蜂鸣器 一、工程模板 参照第一篇，新建工程目录ProjectMould，将先前打包好的Start，Library和User文件^C^V过来，并在Keil5内完成器件支持包的…...
n3.平滑升级和回滚
平滑升级和回滚 1. 平滑升级流程2. 平滑升级和回滚案例 有时候我们需要对Nginx版本进行升级以满足对其功能的需求，例如添加新模块，需要新功能，而此时 Nginx又在跑着业务无法停掉，这时我们就可能选择平滑升级 1. 平滑升级流程 平…...
C#WPF DialogHost.Show 弹出对话框并返回数据
在WPF中，使用DialogHost.Show方法显示一个对话框并获取返回数据，你需要定义一个对话框，并在对话框关闭时返回数据。以下是一个简单的例子： 首先，在主窗口中添加DialogHost控件： <MaterialDesign:DialogHost x:Name="dialogHost" /> 然后，创建一个对话…...
Kafka Producer发送消息流程之分区器和数据收集器
文章目录 1. Partitioner分区器2. 自定义分区器3. RecordAccumulator数据收集器 1. Partitioner分区器 clients/src/main/java/org/apache/kafka/clients/producer/KafkaProducer.java，中doSend方法，记录了生产者将消息发送的流程，其中有一步…...
)
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题意思路标…...
＜数据集＞猫狗识别数据集＜目标检测＞
数据集格式：VOCYOLO格式 图片数量：3686张 标注数量(xml文件个数)：3686 标注数量(txt文件个数)：3686 标注类别数：2 标注类别名称：[cat, dog] 序号类别名称图片数框数1cat118811892dog24982498 使用标…...
Figma 中文版指南：获取和安装汉化插件
Figma是一种主流的在线团队合作设计工具，也是一种基于 Web 端的设计工具。在当今的设计时代，Figma 的使用满足了每个人的设计需求，不仅可以实现在线编辑，还可以方便日常管理，有效提高工作效率。然而，相信很…...
用c语言写一个贪吃蛇游戏
贪吃蛇游戏通常涉及到终端图形编程和简单的游戏逻辑。以下是一个基本的实现示例，包括贪吃蛇的移动、食物生成、碰撞检测等功能。 1. 贪吃蛇游戏的基本结构 贪吃蛇游戏可以分为以下几个部分： 游戏地图和终端绘制：使用二维数组表示游戏地图&am…...
计算机网络入门 --网络模型
计算机网络入门 --网络模型 1.OSI七层模型 1.1 模型概念 OSI七层模型是将计算机网络通信协议划分为七个不同层次的标准化框架，每一层都负责不同功能，并从物理连接层开始处理。OSI七层网络模型如下分别为：物理层、数据链路层、网络层、传输…...
陪玩系统小程序模式APP小程序H5系统搭建开发
随着移动互联网的营及和游戏行业的蓬轨发展，陪玩服务应远而生并迅速唱起，陪玩系统小程序作为连接游戏玩家与陪玩师的桥梁，其模式系统的搭建与开发是得尤为重要，本文将洋细凰述陪玩系统小程宗模式系统的搭建开发流程，包…...
算法训练营day72
题目：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_…...
C语言------指针讲解(2)
目录 一、数组名的理解 二、使用指针访问数组 三、一维数组传参的本质 四、冒泡排序 五、二级指针 六、指针数组 七、指针数组模拟二维数组 一、数组名的理解 通过学习，我们知道：数组名和数组首元素的地址打印出来的结果一模一样，数组…...
大数据技术基础
一、大数据平台 1.大数据平台方案步骤： ①市场上有哪些大数据平台 ②硬件、系统、业务增长等方面 ③方案是否通过 通过后：按照一期目标投入 先虚拟环境部署联系，再实际部署 《大数据架构介绍》《Hadoop架构解析》《Hadoop集群规划》 《H…...
【文心智能体】前几天百度热搜有一条非常有趣的话题《00后疯感工牌》，看看如何通过低代码工作流方式实现图片显示
00后疯感工牌体验：https://mbd.baidu.com/ma/s/6yA90qtM 目录 前言比赛推荐工作流创建工作流入口创建工作流界面工作流界面HTTP工具卡点地方 总结推荐文章 前言 前几天百度热搜有一条非常有有趣《00后疯感工牌》。 想着通过文心智能体去一键生成00后疯感工牌是不是…...
TPCH dbgen数据生成工具在Linux环境下的配置与实战
1. 环境准备：从零搭建TPCH测试环境 第一次接触TPCH dbgen工具时，我花了整整两天时间才搞明白所有依赖关系。这个工具虽然功能强大，但官方文档确实不够友好。下面把我踩过的坑都总结出来，让你能快速上手。 系统要求方面，…...
Video2X：用AI魔法将低分辨率视频变成4K超清大片的终极指南
Video2X：用AI魔法将低分辨率视频变成4K超清大片的终极指南 【免费下载链接】video2x A machine learning-based video super resolution and frame interpolation framework. Est. Hack the Valley II, 2018. 项目地址: https://gitcode.com/GitHub_Trending/vi/v…...
Vue2项目实战：集成西瓜播放器xgplayer实现企业级视频播放组件
1. 为什么选择xgplayer做企业级视频播放方案 在在线教育平台这类对视频播放要求较高的场景中，播放器的选择直接影响用户体验和开发效率。我经历过多个项目的实战验证，西瓜播放器xgplayer确实是个不错的选择。它不像某些开源播放器那样需要折腾各种兼容性…...
告别插件切换！一款满足你所有挖洞需求的浏览器插件助力高效挖洞
0x01 工具介绍 由于目前网上流通的插件功能都各有千秋，每个插件都有他自己的亮点，每次使用都得按场景去选择插件，为了能够有一款属于自己的完美插件，不用来回倒腾切换，由此GodEyes 诞生了。 它是一款可以帮助安全研究…...
Windows下Power Shell快速激活venv虚拟环境的正确姿势（避坑指南）
Windows下Power Shell快速激活venv虚拟环境的正确姿势（避坑指南） 在Windows平台上使用Python进行开发时，虚拟环境（venv）是隔离项目依赖的必备工具。然而，许多从Linux/macOS转向Windows的开发者，…...
新手零基础入门：在快马平台用AI生成你的首个龙虾部署项目
新手零基础入门：在快马平台用AI生成你的首个龙虾部署项目 作为一个刚接触容器化开发的新手，第一次听说"龙虾部署"这个概念时，我完全摸不着头脑。后来才知道，这其实就是Docker容器化部署的一种形象说法。今天我想分享一…...
AI时代：重塑核心竞争力
一、企业的核心竞争力重塑未来企业的护城河是AI构建的流程，而不是的数据。 过去我们说数据是石油，但在 LLM 时代，通用数据的价值在被快速拉平。而公司内部独特的、经过千锤百炼的工作流程、决策逻辑、操作手册，这些才是无法被轻易…...
DFRDisplayKm 实用指南：Apple Touch Bar Windows支持常见问题全解析
DFRDisplayKm 实用指南：Apple Touch Bar Windows支持常见问题全解析 【免费下载链接】DFRDisplayKm Windows infrastructure support for Apple DFR (Touch Bar) 项目地址: https://gitcode.com/gh_mirrors/df/DFRDisplayKm DFRDisplayKm 是一款专为 Windows…...
Python 3.14 JIT编译器性能调优，深度解析_pyltopt.c中6处可调优位点与GCC/Clang后端适配策略
第一章：Python 3.14 JIT编译器性能调优概览Python 3.14 引入了实验性内置 JIT（Just-In-Time）编译器，基于 LLVM 后端实现，旨在对热点函数进行动态编译优化，显著提升数值计算、循环密集型及递归场景的执行效率…...
5分钟部署阿里RexUniNLU：Web界面操作，无需编程基础
5分钟部署阿里RexUniNLU：Web界面操作，无需编程基础 1. 认识RexUniNLU：零样本理解的神器 想象一下，你刚接手一个新项目，老板丢给你一堆用户评论，要求你快速分析出大家对产品"屏幕"、"续航&…...