什么是fetch?

Fetch被称为下一代Ajax技术,采用Promise方式来处理数据。
是一种简洁明了的API,比XMLHttpRequest更加简单易用。
fetch是原生的(无需引入任何库和框架)。

fetch跟ajax的区别:

页面中需要向服务器请求数据时,基本上都会使用Ajax来实现。
Ajax的本质是使用XMLHttpRequest对象来请求数据,而XMLHttpRequest对象是通过事件的模式来实现返回数据的处理。
与XMLHttpRequest类似,Fetch允许你发出AJAX请求。
区别在于Fetch API使用Promise方式,Promise是已经正式发布的ES6的内容之一,因此是一种简洁明了的API,比XMLHttpRequest更加简单易用。

1.使用fetch解析文本数据:

fetch_txt.html代码如下:

<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
let oBtn = document.getElementById('btn1');
oBtn.onclick = async function(){
// 1.请求
let res = await fetch('1.txt');
// 2.解析
let str = await res.text(); console.log(str);
}
}
</script>
</head>
<body>
<input type="button" value="读取" id="btn1" />
</body>
1.txt代码如下:

what are you doing 

comedy

click button效果如下:


2.使用fetch解析json数据

fetch_json.html代码如下:
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
let oBtn = document.getElementById('btn1');
oBtn.onclick = async function(){
// 1.请求;
let res = await fetch('1.json');
// 2.解析
let str = await res.json(); console.log(str);
};
};
</script>
</head>
<body>
<input type="button" value="读取" id="btn1" />
</body>
1.json代码如下:
{"name":"comedy","who":"yourdaddy","age":""}

click button效果如下:


3.使用fetch解析图片(解析二进制数据)

fetch_imgdata.html代码如下:
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
let oImg = document.getElementById('img');
let oBtn = document.getElementById('btn1');
oBtn.onclick = async function(){
// 1.请求
let res = await fetch('timg.jpg');
// 2.解析
let imgdata = await res.blob();
console.log(imgdata);
//把二进制数据转换能能够解析的url
let imgurl = URL.createObjectURL(imgdata);
oImg.src=imgurl;
console.log(imgurl);
};
};
</script>
</head>
<body>
<input type="button" value="读取" id="btn1" />
<img id="img" />
</body>

运行效果如下:


end

js数据交互——fetch的更多相关文章

  1. echarts同一页面四个图表切换的js数据交互

    需求:点击tab页,切换四个不同的图表,ajax向后台请求数据,展示在四个不同的图表中. 其余的就不多说,直接上js代码了 $(function() { $("#heart").o ...

  2. JS数据交互:动态从数据库中获取数据填充Select

    JavaScript代码: $(document).ready(function () { getIntype(); });function getIntype(){ $.ajax({ type:&q ...

  3. js前台与后台数据交互-前台调后台

    转自:http://blog.csdn.net/wang379275614/article/details/17033981   网站是围绕数据库来编程的,以数据库中的数据为中心,通过后台来操作这些数 ...

  4. 前后端数据交互处理基于原生JS模板引擎开发

    json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那 ...

  5. Vue.js 学习笔记之三:与服务器的数据交互

    显而易见的,之前的02_toDoList存在着一个很致命的缺陷.那就是它的数据只存在于浏览器端,一但用户关闭或重新载入页面,他之前加入到程序中的数据就会全部丢失,一切又恢复到程序的初始状态.要想解决这 ...

  6. 对GraphQL-BFF:微服务背景下的前后端数据交互方案的研究-------引用

    随着多终端.多平台.多业务形态.多技术选型等各方面的发展,前后端的数据交互,日益复杂. 同一份数据,可能以多种不同的形态和结构,在多种场景下被消费. 在理想情况下,这些复杂性可以全部由后端承担.前端只 ...

  7. 04 . Vue组件注册,数据交互,调试工具及组件插槽介绍及使用

    vue组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...

  8. 04 . Vue组件注册,组件间数据交互,调试工具及组件插槽介绍及使用

    vue组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...

  9. android 从 phonegap 到 js webview 交互

    像生活类.办公协同类. 动态添加,下载等. 1.phonegap 我这里用了旧的版本,可能新版本变化大了. 创建asset资源文件夹,然后新建index.html copy 相应的js 文件进来. 创 ...

随机推荐

  1. elastic操作-索引重命名,索引副本数修改

    目前我们使用的elastic版本为2.3.5 当前版本没有直接的curl操作可以更改索引的名称,索引的副本数. 有直接更改索引副本数的api. curl -XPUT "192.168.1.1 ...

  2. 使用JSP+Servlet+Jdbc+Echatrs实现对豆瓣电影Top250的展示

    使用JSP+Servlet+Jdbc+Echatrs实现对豆瓣电影Top250的展示 写在前面: 有的小伙伴,会吐槽啦,你这个标题有点长的啊.哈哈 ,好像是的!不过,这个也是本次案例中使用到的关键技术 ...

  3. 知名大厂如何搭建大数据平台&架构

    今天我们来看一下淘宝.美团和滴滴的大数据平台,一方面进一步学习大厂大数据平台的架构,另一方面也学习大厂的工程师如何画架构图.通过大厂的这些架构图,你就会发现,不但这些知名大厂的大数据平台设计方案大同小 ...

  4. # C# 中的Task创建指南

    本文还处于草稿阶段,难免还有错误修改改正,逻辑还不是很清晰,笔者会努力完善,长期更新! [0000] 前言 标题起得有些"大",意在集大家的力量,总结出来一份关于Task相对&qu ...

  5. java8 Stream使用总结

    [前言] java8新特性 java8 函数接口 java8 Optional使用总结 Java 8 时间日期使用 java8 lambda表达式 1.流的介绍 Java8 中的 Stream 是对集 ...

  6. .NET进阶篇-丑话先说,Flag先立--致青春

    作为开发者,工作了半年,也总觉得技术栈和刚毕业区别不大,用的技术还都是N年前的,每每看到新东西,也只心里哇塞惊叹一下,然后就回归于忙碌.怪自己的技术池太浅,热门的令人称奇的技术也都是在其他巨人的肩膀上 ...

  7. python2和3区别

    核心类差异 Python3对Unicode字符的原生支持 Python2中使用 ASCII 码作为默认编码方式导致string有两种类型str和unicode,Python3只支持unicode的st ...

  8. Linux 下复制整个文件夹的命令

    在 Linux 下复制整个文件夹,包括它的子文件夹及其隐藏文件的方法是: cp -r /etc/skel /home/user 或者 mkdir /home/<new_user> cp - ...

  9. AlexNet模型的解析及tensorflow实现

    AlexNet是ImageNet LSVRC 2012比赛中分类效果第一的深度神经网络模型,点击链接下载论文http://papers.nips.cc/paper/4824-imagenet-clas ...

  10. mysql锁表处理语句

    show OPEN TABLES where In_use > 0; -- 查询是否锁表show processlist; -- 查询到相对应的进程===然后killidSELECT * FRO ...