[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后疯感工牌是不是…...
Docker 运行 Kafka 带 SASL 认证教程
Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明：server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...
【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制
使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下，限制某个 IP 的访问频率是非常重要的，可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案，使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...
Web中间件--tomcat学习
Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机，它可以执行Java字节码。Java虚拟机是Java平台的一部分，Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...
Caliper 配置文件解析：fisco-bcos.json
config.yaml 文件 config.yaml 是 Caliper 的主配置文件，通常包含以下内容： test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...
tomcat指定使用的jdk版本
说明 有时候需要对tomcat配置指定的jdk版本号，此时，我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...
数据分析六部曲？
引言 上一章我们说到了数据分析六部曲，何谓六部曲呢？ 其实啊，数据分析没那么难，只要掌握了下面这六个步骤，也就是数据分析六部曲，就算你是个啥都不懂的小白，也能慢慢上手做数据分析啦。 第一…...
深入解析 ReentrantLock：原理、公平锁与非公平锁的较量
ReentrantLock 是 Java 中 java.util.concurrent.locks 包下的一个重要类，用于实现线程同步，支持可重入性，并且可以选择公平锁或非公平锁的实现方式。下面将详细介绍 ReentrantLock 的实现原理以及公平锁和非公平锁的区别。 ReentrantLock 实现原理 基本架构 ReentrantLo…...
鸿蒙Navigation路由导航-基本使用介绍
1. Navigation介绍 Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用，其内部默认包含了标题栏、内容区和工具栏，其中内容区默认首页显示导航内容（Navigation的子组件）或非首页显示（Nav…...
Angular中Webpack与ngx-build-plus 浅学
Webpack 在 Angular 中的概念 Webpack 是一个模块打包工具，用于将多个模块和资源打包成一个或多个文件。在 Angular 项目中，Webpack 负责将 TypeScript、HTML、CSS 等文件打包成浏览器可以理解的 JavaScript 文件。Angular CLI 默认使用 Webpack 进行项目…...
Faiss vs Milvus 深度对比：向量数据库技术选型指南
Faiss vs Milvus 深度对比：向量数据库技术选型指南 引言：向量数据库的时代抉择 在AI应用爆发的今天，企业和开发者面临着如何存储和检索海量向量数据的重大技术选择。作为当前最受关注的两大解决方案，Faiss和Milvus代表了两种不同…...