Fetch(原生)的简单使用
前言: Fetch 提供了对 Request 和 Response 等对象通用的定义。
发送请求或者获取资源,需要使用 fetch() 方法。
具体使用代码:
<script>
fetch("地址",{method:"请求方式"}).then(function (res) { //将异步数据res处理成text(转成json),
res.text().then(function (value) {
console.log(value);
})
})
</script>
示例:
get请求:
fetch("url", {
method: "get"
}).then(function(resp) {
//将服务器响应回来的内容 序列化成 json格式 使用text()也可以
resp.json().then((data) => {
// data -> 数据
})
});
post请求:
var arr1 = [{
name: "天皇盖地虎",
detail:"宝塔镇河妖"
}];
fetch("url", {
method: "post",
headers: {//设置请求的头部信息
"Content-Type": "application/json"
//跨域时可能要加上
//"Accept":"allication/json"
}, //将arr1对象序列化成json字符串
body: JSON.stringify(arr1)//向服务端传入json数据
}).then(function(resp) {
resp.json().then((data) => { })
});
Fetch(原生)的简单使用的更多相关文章
- 原生JS简单的无缝自动轮播
最近在不断的加强巩固js.在学习jq和vue之后发现很多东西其实都是不明所以,有些底层的东西自己不懂,到头来也只是一昧的使用,一直在用别人的东西,对自己的成长帮助也不大. 万丈高楼平地起,基础打扎实了 ...
- wcf第4步之原生调用简单封装
public interface IDemoServiceChannel : IDemoService, System.ServiceModel.IClientChannel { } public p ...
- 手把手原生js简单轮播图
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
- 原生js简单调用百度翻译API实现的翻译工具
先来个在线demo: js翻译工具 或者百度搜索js简单调用百度翻译API工具(不过有个小小的界面显示bug,我想细心的人应该会发现) 或者直接前往该网址:js翻译工具 或者前往我的github:gi ...
- 原生js简单轮播图 代码
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
- 原生js简单实现拖拽效果
实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...
- 原生js简单实现双向数据绑定原理
根据对象的访问器属性去监听对象属性的变化,访问器属性不能直接在对象中设置,而必须通过 defineProperty() 方法单独定义. 访问器属性的"值"比较特殊,读取或设置访问器 ...
- 用原生js简单模仿angular的依赖注入
大家都知道angular 依赖注入很神奇,跟我们平常写代码的风格思维差别很大,不过仔细分析确是一个很有意思的东西,依赖注入早期也叫依赖倒置,是java中有的.废话不多少直接上例子 本帖属于原创,转载请 ...
- 原生 js 简单实现 Promise
写在思否,欢迎各位大佬给出建议: https://segmentfault.com/a/1190000018530433
- php原生导出简单word表格(TP为例) (原)
后台: # 菲律宾名单word导出 public function export_word(){ $tids = $_GET['tids']; $userinfo=M("philippi ...
随机推荐
- bzoj 4736: 温暖会指引我们前行 (LCT 维护最大生成树)
链接:https://www.lydsy.com/JudgeOnline/problem.php?id=4736 题面: 寒冬又一次肆虐了北国大地 无情的北风穿透了人们御寒的衣物 可怜虫们在冬夜中发出 ...
- [转帖]intel发布会之前,漫谈CPU核心架构:CCX、Ring Bus、Mesh
intel发布会之前,漫谈CPU核心架构:CCX.Ring Bus.Mesh https://baijiahao.baidu.com/s?id=1607585351741429318&wfr= ...
- Spring系列四:Bean Scopes作用域
等闲识得东风面,万紫千红总是春. 概述 在Spring框架中,我们可以在六个内置的spring bean作用域中创建bean,还可以定义bean范围.在这六个范围中,只有在使用支持Web的applic ...
- HORSE PILL--一种新型的linux rootkit
资料 ppt:https://www.blackhat.com/docs/us-16/materials/us-16-Leibowitz-Horse-Pill-A-New-Type-Of-Linux- ...
- 怎样在 Vue 中使用 v-model 处理表单?
主要是通过 v-model 对表单元素做数据的 双向绑定. 用法其实也很简单, 只是因为表单元素有不同类型, 处理方式有些许不同, 这点需要注意. 1. 如果是 输入框 , 可以直接使用 v-mode ...
- java——ArrayList中contains()方法中的疑问
问题引子: ist<Student> students=new ArrayList<Student>(); students.add(new Student("201 ...
- 【原创】大叔问题定位分享(34)Spring的RestTemplate请求json数据后内容被修改
先看代码 org.springframework.web.client.RestTemplate public RestTemplate() { this.messageConverters = ne ...
- centos配置vsftpd服务2
ftp搭建 一.搭建前提a.ssh服务已经开启,b.防火墙关闭,c.连网1.查看ssh和防火墙的状态 service sshd status service iptables status 2.开启s ...
- Windows 7 系统下显示文件类型的扩展名和隐藏文件
一.显示扩展名 点击开始菜单 在搜索框中输入「文件夹选项」并单击 切换到「查看」栏,取消勾选「隐藏已知文件类型的扩展名」这一项 设置完成 ps: 你也可以通过单击下图位置进行相应操作来达到同样的效果 ...
- Pycharm开发环境设置与熟悉
Pycharm开发环境设置与熟悉. 练习基本输入输出: print('你好,{}.'.format(name)) uprint(sys.argv) 库的使用方法: import ... from .. ...