什么是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. kafka删除弃用的groupid

    登录zookeeper客户端 cd zookeeper-3.4.10 sh zkCli.sh 查看groupid信息 [zk:localhost:2181(CONNECTED) 1] ls /cons ...

  2. Maven项目运行报错提示找不到加载主类

    遇到这个问题花了几小时时间看网上的各种解决方法.试了几种都没用,最后用了这种本办法. 亲测第三条 https://blog.csdn.net/yuliantao/article/details/766 ...

  3. JS中数据类型转换

    JS中数据类型转换汇总 JS中的数据类型分为 [基本数据类型] 数字 number 字符串 string 布尔 boolean 空 null 未定义 undefined [引用数据类型] 对象 obj ...

  4. 讨论c/c++计算小数的精度问题

    求出所有100以下整数与一位小数相乘等于相加的浮点数这个有Bug浮点数计算时精度会出现误差 除非使用非常精确的类型或限制浮点的位数 比如 #include <iostream> int m ...

  5. 使用JavaScript·求数组的最大值和最小值

    前言  在数组中并没有提供arr.max()和arr.min()这样的方法.那么是不是可以通过别的方式实现类似这样的方法呢?那么今天我们就来整理取出数组中最大值和最小值的一些方法.   法一:其实利用 ...

  6. 解决MVC中Model上的特性在EF框架刷新时清空的问题

    MVC中关于前端数据的效验一般都是通过在Model中相关的类上打上特性来实现. 但是在我们数据库发生改变,EF框架需要刷新时会把我们在Model上的特性全部清除,这样的话,我们前端的验证就会失效. 因 ...

  7. js完整

    jQuery jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行 ...

  8. 【NOIP2003】传染病控制

    Description 问题背景: 近来,一种新的传染病肆虐全球.蓬莱国也发现了零星感染者,为防止该病在蓬莱国大范围流行,该国政府 决定不惜一切代价控制传染病的蔓延.不幸的是,由于人们尚未完全认识这种 ...

  9. Coins POJ - 1742

    给出硬币面额及每种硬币的个数,求从1到m能凑出面额的个数. Input 多组数据,每组数据前两个数字为n,m.n表示硬币种类数,m为最大面额,之后前n个数为每种硬币的面额,后n个数为相应每种硬币的个数 ...

  10. 深入理解 web 协议(一)- http 包体传输

    本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/WlT8070LlrnSODFRDwZsUQ作者:吴越 开坑这个系列的原因,主要是在大前端学习的 ...