[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后疯感工牌是不是…...
日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする
日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1） にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために ＆ ように（３）そう（４）にする3、…...
Python爬虫（一）：爬虫伪装
一、网站防爬机制概述 在当今互联网环境中，具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类： 身份验证机制：直接将未经授权的爬虫阻挡在外反爬技术体系：通过各种技术手段增加爬虫获取数据的难度…...
深入浅出Diffusion模型：从原理到实践的全方位教程
I. 引言：生成式AI的黎明 – Diffusion模型是什么？ 近年来，生成式人工智能（Generative AI）领域取得了爆炸性的进展，模型能够根据简单的文本提示创作出逼真的图像、连贯的文本，乃至更多令人惊叹的…...
HTML前端开发：JavaScript 获取元素方法详解
作为前端开发者，高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法，分为两大系列： 一、getElementBy... 系列 传统方法，直接通过 DOM 接口访问，返回动态集合（元素变化会实时更新）。…...
Python常用模块：time、os、shutil与flask初探
一、Flask初探 & PyCharm终端配置 目的： 快速搭建小型Web服务器以提供数据。 工具： 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask： 建议： 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装，避免频繁切换。 PyCharm Terminal 配置建议： 打开 Py…...
相关类相关的可视化图像总结
目录 一、散点图 二、气泡图 三、相关图 四、热力图 五、二维密度图 六、多模态二维密度图 七、雷达图 八、桑基图 九、总结 一、散点图 特点 通过点的位置展示两个连续变量之间的关系，可直观判断线性相关、非线性相关或无相关关系，点的分布密…...
EasyRTC音视频实时通话功能在WebRTC与智能硬件整合中的应用与优势
一、WebRTC与智能硬件整合趋势 随着物联网和实时通信需求的爆发式增长，WebRTC作为开源实时通信技术，为浏览器与移动应用提供免插件的音视频通信能力，在智能硬件领域的融合应用已成必然趋势。智能硬件不再局限于单一功能，对实时…...
Java中HashMap底层原理深度解析：从数据结构到红黑树优化
一、HashMap概述与核心特性 HashMap作为Java集合框架中最常用的数据结构之一，是基于哈希表的Map接口非同步实现。它允许使用null键和null值（但只能有一个null键），并且不保证映射顺序的恒久不变。与Hashtable相比，Hash…...
C#最佳实践：为何优先使用as或is而非强制转换
C#最佳实践：为何优先使用as或is而非强制转换 在 C# 的编程世界里，类型转换是我们经常会遇到的操作。就像在现实生活中，我们可能需要把不同形状的物品重新整理归类一样，在代码里，我们也常常需要将一个数据类型转换为另…...
【threejs】每天一个小案例讲解：创建基本的3D场景
代码仓 GitHub - TiffanyHoo/three_practices: Learning three.js together! 可自行clone，无需安装依赖，直接liver-server运行/直接打开chapter01中的html文件 运行效果图 知识要点 核心三要素 场景（Scene） 使用 THREE.Scene(…...