JS详解-fetch核心语法

 document.querySelector('.btn').addEventListener('click',async () => {const p =  new URLSearchParams({pname:'浙江省',cname:'杭州市'})//1、如何请求?默认为get,参数1 url地址,返回promiseconst res = await fetch('http://hmajax.itheima.net/api/area?'+p.toString())if(res.status >= 200 && res.status < 300){//2、如何处理响应(JSON),.json方法解析json返回promiseconst data = await res.json()}else{//3、处理异常console.log('请求异常',res.status)}})

fetch提交FormData:

        document.querySelector('.ipt').addEventListener('change',async function(){// querySelector获取的是一个dom对象,files是一个文件列表,[0]是第一个文件const img = this.files[0]// 创建一个formdata对象const data = new FormData()data.append('img',img)const res = await fetch('http://hmajax.itheima.net/api/uploadimg', {// 请求方法method: 'POST',// 提交数据body: data})// 解析返回的json数据const resData = await res.json()// 回显document.querySelector('.icon').src = resData.data.url

fetch提交JSON:

document.querySelector('.btn').addEventListener('click',async function(){// 实例化Headers对象const headers = new Headers()// append 添加keyvalueheaders.append('Content-Type','application/json')const res = await fetch('https://jsonplaceholder.typicode.com/posts',{method: 'POST',headers,// JSON.stringify()将对象转换为json字符串body: JSON.stringify({title: 'foo',body: 'bar',userId: 1})})// res.status 判断状态码const data = await res.json()console.log(data)})

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

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

相关文章

给你一个网站如何测试?

主要围绕&#xff0c;功能&#xff0c;页面 UI &#xff0c;兼容&#xff0c;性能&#xff0c;安全&#xff0c;这几个方面去聊&#xff0c;首先是制定测试计划&#xff0c;确定测试范围和测试策略&#xff0c;一般包括以下几个部分&#xff1a;功能性测试&#xff1b;界面测试…

【打印SQL执行日志】⭐️Mybatis-Plus通过配置在控制台打印执行日志

目录 前言 一、Mybatis-Plus 开启日志的方式 二、测试 三、日志分析 章末 前言 小伙伴们大家好&#xff0c;相信大家平时在处理问题时都有各自的方式&#xff0c;最常用以及最好用的感觉还是断点调试&#xff0c;但是涉及到操作数据库的执行时&#xff0c;默认的话在控制台…

Comfyui插件CLIPSeg应该如何安装

✨背景 GitHub - biegert/ComfyUI-CLIPSeg: ComfyUI CLIPSeg Comfyui-CLIPSeg是一个相对没那么大众的插件&#xff0c;在基于语义分割和自动抠图方面&#xff0c;还是比较实用的一个插件。但是插件安装起来&#xff0c;跟普通的插件安装有亿点不一样&#xff0c;所以很多小朋友…

excel中文本列显示e+17这样的科学计数法如何处理

我的excel中文本列显示e17这样的科学计数法 然后右键&#xff0c;设置单元格格式&#xff0c;为特殊&#xff0c;邮政编码&#xff0c;点确定即可 最后效果如下

全网最强JavaWeb笔记 | 万字长文爆肝JavaWeb开发——day05_SpringBootWeb请求响应

万字长文爆肝黑马程序员2023最新版JavaWeb教程。这套教程打破常规&#xff0c;不再局限于过时的老套JavaWeb技术&#xff0c;而是与时俱进&#xff0c;运用的都是企业中流行的前沿技术。笔者认真跟着这个教程&#xff0c;再一次认真学习一遍JavaWeb教程&#xff0c;温故而知新&…

如何通过ArkTS卡片的Canvas自定义绘制能力实现五子棋游戏卡片

介绍 本示例展示了如何通过ArkTS卡片的Canvas自定义绘制能力实现一个简单的五子棋游戏卡片。 使用Canvas绘制棋盘和黑白棋子的落子。通过卡片支持的点击事件进行交互&#xff0c;让用户在棋盘上进行黑白棋子的对局。通过TS的逻辑代码实现五子棋输赢判定、回退等逻辑计算&…

算法沉淀 —— 动态规划(子序列问题(上))

算法沉淀 —— 动态规划&#xff08;子序列问题&#xff08;上&#xff09;&#xff09; 前言一、最长递增子序列二、摆动序列三、 最长递增子序列的个数四、最长数对链 前言 几乎所有的动态规划问题大致可分为以下5个步骤&#xff0c;后续所有问题分析都将基于此 1.、状态表示…

BigInteger 大整数 比较大小

一、以整数型礼品交易为例子 int userSend Integer.valueOf(id);int amount Integer.valueOf(amountStr);int userAccept Integer.valueOf(userIdAccept);GiftService giftService new GiftService();boolean carry1 giftService.isHavePropertyByUserIdByGiftId(userSend…

Minikube本地搭建单节点Kubernetes集群

1、什么是 Minikube Minikube 是一个开源工具&#xff0c;旨在为开发者提供一种便捷的方式在本地环境中搭建单节点的 Kubernetes 集群。它主要用于开发、测试和学习 Kubernetes 应用程序&#xff0c;无需依赖大型的硬件资源或复杂的多节点集群配置。minikube 使用轻量级虚拟化技…

C/C++程序的(编译,链接)翻译与运行

目录 前言&#xff1a; 1.程序环境 2.翻译环境 3.预处理&#xff08;预编译&#xff09; 4.编译 5.汇编 6.链接 7.运行环境 总结&#xff1a; 前言&#xff1a; 本篇来解释c/c程序的翻译环境与运行环境中的过程&#xff0c;不同的编程语言的翻译环境类似&#xff0c;…

Transformers in Vision:A Survey 阅读笔记

ACM上的一篇综述&#xff0c;讨论Transformer在CV上的应用。 摘要&#xff1a; Among their salient benefits,Transformers enable modeling long dependencies between inputsequence elements and support parallel processing of sequence as compared to recurrent networ…

信息传播的AI时代:机器学习赋能新闻出版业的数字化之旅

&#x1f9d1; 作者简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟,欢迎关注。提供嵌入式方向的学习指导…

leetcode90. 子集 II

去重逻辑&#xff1a; 关键是画出递归树&#xff01;当我们即将进入第二个2的递归的时候&#xff0c;发现isVisit数组是100&#xff0c;也就是说这俩重复的数是False&#xff0c;并且这俩在nums值相同&#xff0c;所以写出去重逻辑&#xff01; class Solution { public:vector…

leetcode代码记录(打家劫舍 II

目录 1. 题目&#xff1a;2. 我的代码&#xff1a;小结&#xff1a; 1. 题目&#xff1a; 一个专业的小偷&#xff0c;计划偷窃一个环形街道上沿街的房屋&#xff0c;每间房内都藏有一定的现金。这个地方所有的房屋都 围成一圈 &#xff0c;这意味着第一个房屋和最后一个房屋是…

【随笔】Git -- 高级命令(上篇)(六)

&#x1f48c; 所属专栏&#xff1a;【Git】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496; 欢迎大…

【面试八股总结】超文本传输协议HTTP(二)

参考资料 &#xff1a;小林Coding、阿秀、代码随想录 一、HTTP缓存技术 将资源&#xff08;如网页、图像、脚本等&#xff09;的副本存储在客户端或中间代理服务器上&#xff0c;以便将来的请求可以直接从缓存中获取&#xff0c;而不必重新从服务器下载资源。这有助于减少网…

二维码:技术、商业与未来

title: 二维码&#xff1a;技术、商业与未来 date: 2024/4/3 19:12:28 updated: 2024/4/3 19:12:28 tags: 二维码技术商业应用移动支付物联网AR/VR融合智能家居数字化社会 第一章&#xff1a;引言 1. 二维码在数字化时代的重要性和普及程度 在数字化时代&#xff0c;二维码作…

JVM之常用监控工具

JVM之常用监控工具 jps jinfo 获取配置信息 基本语法 jinfo [options] <pid>常用选项 -sysprops&#xff1a;显示JVM进程的系统属性。-flags&#xff1a;显示用于启动JVM的命令行标志和VM选项。-flag <name>&#xff1a;显示指定JVM标志的当前值。-flag [|-]&…

Windows10安装CloudCompare(图文安装)

CloudCompare是一个3D点云&#xff08;和三角网格&#xff09;处理软件。它最初被设计用于在两个密集的3D点云&#xff08;例如用激光扫描仪获取的点云&#xff09;之间或点云和三角形网格之间进行比较。它依赖于专用于此任务的特定八叉树结构。 之后&#xff0c;它已经扩展到一…

[实验报告]--基于端口安全

[实验报告] 目录 [实验报告] 一、项目背景 二、实验环境 三、项目规划设计 四、项目实施 五、验证项目成果 基于端口安全的 Jan16 公司网络组建 一、项目背景 Jan16 公司开发部为重要部门&#xff0c;所有员工使用指定的计算机工作&#xff0c;为防止员工或访客使 用个…