[JS]认识feach

介绍

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 两个库做兼容处理

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/46914.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OracleLinux6.9升级UEK内核

方法一: [root@localhost ~]# uname -r 4.1.12-61.1.28.el6uek.x86_64 [root@localhost ~]# rpm -qa | grep kernel-uek kernel-uek-firmware-4.1.12-61.1.28.el6uek.noarch kernel-uek-4.1.12-61.1.28.el6uek.x86_64 [root@localhost ~]# yum list kernel-uek Loaded plug…

金豺狼优化算法(GWO)及其Python和MATLAB实现

金豺狼优化算法&#xff08;GWO&#xff09;是一种启发式优化算法&#xff0c;灵感来源于灰狼群体的社会行为和层级结构。GWO算法由Mirjalili等人于2014年提出&#xff0c;通过模拟灰狼群体的捕猎行为&#xff0c;寻找最优解。相比于其他优化算法&#xff0c;GWO算法具有较好的…

探索Gradle自动化测试:一站式测试框架配置指南

探索Gradle自动化测试&#xff1a;一站式测试框架配置指南 在当今快速迭代的软件开发周期中&#xff0c;自动化测试是确保代码质量和快速反馈的关键。Gradle&#xff0c;作为一个强大的构建工具&#xff0c;提供了丰富的插件和配置选项来支持自动化测试。本文将深入探讨如何在…

【Datawhale AI夏令营】电力需求预测挑战赛 Task01

整个学习活动&#xff0c;将带你从 跑通最简的Baseline&#xff0c;到了解竞赛通用流程、深入各个竞赛环节&#xff0c;精读Baseline与进阶实践 文章目录 一、赛题背景二、赛题任务三、实践步骤学习规划分析思路常见时序场景 task01codecode 解读 一、赛题背景 随着全球经济的…

如何在linux中给vim编辑器添加插件

在Linux系统中给Vim编辑器添加插件通常通过插件管理器来完成&#xff0c;以下是一般的步骤&#xff1a; 1.使用插件管理器安装插件 安装插件管理器&#xff08;如果尚未安装&#xff09;&#xff1a; 常见的插件管理器包括 Vundle、vim-plug 和 Pathogen 等。你可以根据个人喜…

TF和TF-IDF区别和联系

TF&#xff08;Term Frequency&#xff09;和TF-IDF&#xff08;Term Frequency-Inverse Document Frequency&#xff09;都是用于文本挖掘和信息检索的统计方法&#xff0c;用于评估一个词在文档或文档集合中的重要性。 一.TF&#xff08;Term Frequency&#xff09; 1.定义…

CSA笔记1-基础知识和目录管理命令

[litonglocalhost ~]$ 是终端提示符&#xff0c;类似于Windows下的cmd的命令行 litong 当前系统登录的用户名 分隔符 localhost 当前机器名称&#xff0c;本地主机 ~ 当前用户的家目录 $ 表示当前用户为普通用户若为#则表示当前用户为超级管理员 su root 切换root权限…

昇思25天学习打卡营第12天|munger85

基于MindSpore通过GPT实现情感分类 这个实现情感分类意思就是通过一些电影的数据最后知道他对于这个电影的评价&#xff0c;最后知道他对于这个电影的评价到底是好还是不好&#xff0c;零就是不好&#xff0c;一就是好。首先我们肯定是按安装这些依赖包了为了今天这个模型我们…

【Apache Doris】周FAQ集锦:第 14 期

【Apache Doris】周FAQ集锦&#xff1a;第 14 期 SQL问题数据操作问题运维常见问题其它问题关于社区 欢迎查阅本周的 Apache Doris 社区 FAQ 栏目&#xff01; 在这个栏目中&#xff0c;每周将筛选社区反馈的热门问题和话题&#xff0c;重点回答并进行深入探讨。旨在为广大用户…

深度加速器 为游戏而生

使用深度加速器的基本步骤如下 首先&#xff0c;访问深度加速器的官方网站或授权下载渠道&#xff0c;下载最新版本的深度加速器客户端。 下载完成后&#xff0c;电脑版直接双击打开免安装&#xff0c;将深度加速器安装到您的计算机或移动设备上。 注册与登录&#xff1a; 打…

C# 匿名方法、Lambda、Linq概念及联系

匿名方法、Lambda表达式与LINQ 匿名方法 概念&#xff1a; 匿名方法是没有名称的方法实现&#xff0c;通常与委托关联使用。它提供了一种在不创建独立命名方法的情况下编写代码块的方式。 语法&#xff1a; delegate void MyDelegate(string message);MyDelegate del dele…

如何构建全生命周期的安全体系架构来确保容器的安全?

容器技术在云原生应用和微服务架构中得到了广泛应用&#xff0c;其轻量、灵活和高效的特点使其成为现代IT环境中的重要工具。然而&#xff0c;尽管容器带来了许多优势&#xff0c;但其安全性问题也不容忽视。接下来跟随博主一起探索如何构建全生命周期的安全体系架构以确保容器…

c++二叉搜索数模拟实现(代码)

二叉搜索树又称二叉排序树&#xff0c;它或者是一棵空树&#xff0c;或者是具有以下性质的二叉树: 1.若它的左子树不为空&#xff0c;则左子树上所有节点的值都小于根节点的值 2.若它的右子树不为空&#xff0c;则右子树上所有节点的值都大于根节点的值 3.它的左右子树也分别为…

Vue3 子组件像父组件传递数据 自定义事件 defineEmits

介绍 很多情况下子组件都需要像父组件去传递一些数据&#xff0c;Vue3和Vue2传递值的写法不太一样。 例子 很常见的一个案例&#xff0c;弹出一个商品对话框&#xff0c;用户选择商品后把商品信息返回给父组件&#xff0c;使用自定义事件去做。 子组件 选择商品对话框 &…

音视频中文件的复用和解复用

在音视频处理和传输领域中&#xff0c;文件复用&#xff08;muxing&#xff09;和解复用&#xff08;demuxing&#xff09;是两个非常重要的概念和过程。它们直接影响到音视频的存储、传输和播放效果。 1. 基本概念 文件复用&#xff08;Muxing&#xff09; 文件复用是将多个…

数据库操作太复杂?Python Shelve模块让你轻松存储,一键搞定!

目录 1、基本操作入门 &#x1f4da; 1.1 安装Shelve模块 1.2 创建与打开Shelve文件 2、存储与读取数据 &#x1f510; 2.1 写入键值对 2.2 读取存储的数据 3、高级功能探索 &#x1f9ed; 3.1 使用Shelve迭代键和值 3.2 键的管理&#xff1a;添加、删除与更新 4、异…

详解曼达拉升级:如何用网络拓扑结构扩容BSV区块链

​​发表时间&#xff1a;2024年5月24日 BSV曼达拉升级是对BSV基础设施的战略性重塑&#xff0c;意在显著增强其性能&#xff0c;运行效率和可扩容。该概念于2018年提出&#xff0c;其战略落地将使BSV区块链顺利过渡&#xff0c;从现有的基于单一集成功能组件的网络拓扑结构&am…

MySQL面试篇章——MySQL基础复习

文章目录 MySQL基本介绍MySQL数据类型数值类型字符串类型日期和时间类型ENUM和SET MySQL运算符算数运算符逻辑运算符比较运算符 MySQL常用函数字符串函数数值函数时间和日期函数聚合函数 MySQL完整性约束范式第一范式&#xff08;1NF&#xff09;第二范式&#xff08;2NF&#…

有关电力电子技术的一些相关仿真和分析:⑤交-直-交全桥逆变+全波整流结构电路(MATLAB/Siumlink仿真)

全桥逆变+全波整流结构 参数:Vin=500V, Vo=200V, T=2:1:1, RL=10Ω, fs=100kHz, L=1mH, C=100uF (1)给定输入电压,输出电压和主电路参数,仿真研究电路工作原理,分析工作时序; (2)调节负载电阻,实现电流连续和断续,并仿真验证; (3)调节占空比,分析占空比与电…

Java —— static关键字

static关键字 1.静态变量 1、个数&#xff1a;在内存中只有一份&#xff0c;被类的多个对象所共享、 2、加载时机&#xff1a;随着类的加载而加载&#xff0c;由于类只会加载一次&#xff0c;故静态变量也只有一份 3、内存位置&#xff1a;jdk6及之前存放在方法区&#xff1b;…