浅谈Fetch 数据交互方式
获取资源很简单，发起一个请求出去，一个响应进来，然后该怎么操作就怎么操作。
fetch 的 api 使用的是 promise 规范，不会 promise（用于延迟(deferred) 计算和异步(asynchronous ) 计算。 一个 Promise 对象代表着一个还未完成，但预期将来会完成的操作。主要使用它处理回调黑洞。） 的请花几分钟学习一下。
使用 fetch 去获取数据的方式:
fetch("服务器地址")
.then(function(response) {
//将获取到的数据使用 json 转换对象
return response.json();
})
.then(function(data) {
//获取转换后的格式
console.log(data);
})
//如果有异常会在 catch 捕获
.catch(function(e) {
console.log("error");
});
有没有发现使用 fetch 后代码变优美了，不关心数据怎么请求的，把更多的精力放在处理数据上。
不用写回调函数了，也不用监听 xhr readystatechange 事件了，当数据请求回来后会传递给 then, 有异常就会直接触发 catch 事件。
fetch 默认发起的是 get 请求，如果需要 post 请求需要设置 Request
Request
Request 客户端向服务器发出请求的一个对象，包括用户提交的信息以及客户端的一些信息
使用 Request 构造一个 fetch 请求的对象的详细信息
//实例化 request 对象
var myRequest = new Request(url, Option);
fetch(myRequest)
.then(function(response) {
console.log(response);
})
//如果有异常会在 catch 捕获
.catch(function(e) {
console.log("error");
});
Request 详细参数配置:
method
设置请求方式
method = GET / POST / PUT / DELETE / HEAD
headers
设置请求头信息，使用 Headers 对象
let headers = new Headers({
'Content-Type': 'text/plain'
});
mode
请求的模式，主要用于跨域设置
mode = cors / no-cors / same-origin
cors : 跨域
no-cors : 不跨域
same-origin : 同源
credentials
需要向服务器发送 cookie 时设置
credentials = omit / same-origin
omit : 省略
same-origin : 发送同源 cookie
cache
cache = default / reload / no-cache
redirect
收到重定向消息时如何处理
redirect = follow / error / manual
follow : 跟随重定向的地址 ，继续请求
error : 不请求
比如：
var request = new Request("url", {
headers: new Headers({
"Content-Type": "text/plain"
}),
method : "POST",
mode: "cors",
redirect : "follow"
});
fetch(request)
.then((response) => {
console.log(response);
})
.catch((error)=>{
console.log(error);
});
fetch 数据处理
当 fetch 把请求结果拿到后，我们需要使用它提供的几个方法来做处理
json
fetch 提供了一个 json 方法将数据转换为 json 格式
fetch(url)
.then((response) => {
//返回 object 类型
return response.json();
})
.then((result) => {
console.log(result);
});
text
fetch 提供了一个 text 方法用于获取数据，返回的是 string 格式数据
fetch(url)
.then((response) => {
//返回 string 类型
return response.text();
})
.then((result) => {
console.log(result);
});
blob
如果我们获取的是一个图像，需要先设置头信息，然后 fetch 会正常处理本次请求，最终使用 blob 方法获取本次请求的结果, 可以把结果赋值给 img src 就能正常的显示一张图片
var request = new Request("xx.img", {
headers: new Headers({
"Content-Type": "image/jpeg"
}),
method : "get",
cache: 'default'
});
fetch(request)
.then((response) => {
return response.blob();
})
.then((stories)=>{
var objectURL = URL.createObjectURL(stories);
let img = document.createElement("img");
img.src = objectURL;
document.querySelector("body").appendChild(img);
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
详解ES6 Fetch API HTTP请求实用指南
本次将介绍如何使用Fetch API(ES6 +)对REST API的 HTTP请求,还有一些示例提供给大家便于大家理解. 注意:所有示例均在带有箭头功能的 ES6中给出. 当前的Web /移动应用程序中的一种常见模式是从服务器请求或显示某种数据(例如用户,帖子,评论,订阅,付款等),然后使用CRUD(创建-Create,阅读-Retrieve,更新-Update或删除-Delete)操作. 为了进一步操作资源,我们经常使用这些JS方法(推荐),例如 .map(), .filter()和
-
vue项目中使用fetch的实现方法
fetch的由来和定义 fetch的由来 众所周知,传统 Ajax (指 XMLHttpRequest)是最早出现的发送异步请求技术,其核心是使用XMLHttpRequest对象.但是它也存在一些令人头疼的问题:XHR 是一个设计粗糙的 API,不符合关注分离的原则:配置和调用方式非常混乱,而且基于事件的异步模型写起来也没有现代的 Promise,generator/yield,async/await 友好.而Fetch 的出现就是为了解决 XHR 存在的问题. fetch的定义和使用 MDN
-
JavaScript fetch接口案例解析
在 AJAX 时代,进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求. 现在产生的 fetch 框架简直就是为了提供更加强大.高效的网络请求而生,虽然在目前会有一点浏览器兼容的问题,但是当我们进行 Hybrid App 开发的时候,如我之前介绍的 Ionic 和 React Native,都可以使用 fetch 进行完美的网络请求. 如果看网上的fetch教程,会首先对比XMLHttpRequest和fetch的优劣,然后引出一堆看了很快会忘记的内容(
-
ES6 fetch函数与后台交互实现
最近在学习react-native,遇到调用后端接口的问题.看了看官方文档,推荐使用es6的fetch来与后端进行交互,在网上找了一些资料.在这里整理,方便以后查询. 1.RN官方文档中,可使用XMLHttpRequest var request = new XMLHttpRequest(); request.onreadystatechange = (e) = >{ if (request.readyState !== 4) { return; } if (request.status ===
-
fetch 使用及如何接收JS传值
使用fetch基本方式: fetch('https://mywebsite.com/endpoint/', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json'}, body: JSON.stringify({ username: 'username', password: 'password'}) }).then(function(res){ console.l
-
fetch 如何实现请求数据
一 序言 在 传统Ajax 时代,进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱,对于刚入门的新手并不友好.今天我们介绍的Fetch提供了一个更好的替代方法,它不仅提供了一种简单,合乎逻辑的方式来跨网络异步获取资源,而且可以很容易地被其他技术使用,例如 Service Workers. 二 与Ajax对比 使用Ajax请求一个 JSON 数据一般是这样: var xhr = new XMLHttpRequest(); xhr.
-
ES6的Fetch异步请求的实现方法
在前端的快速发展中,为了契合更好的设计模式,产生了Fetch框架,Fetch返回的信息比XMLHttpRequest更丰富.但它目前还不是一个标准,它支持大部分常用的http 请求和响应的标准. 一. 一个完整的post请求和响应的过程 var url = "/fetch"; fetch(url,{ method:"post", headers:{ "Content-type":"application/x-www-form-urlen
-
Fetch超时设置与终止请求详解
1.基本使用 Fetch 是一个新的端获取资源的接口,用于替换笨重繁琐XMLHttpRequest.它有了Request 和 Response 以及Headers对象的概念,与后端语言请求资源更接近. 一个简单的GET请求 fetch('https://www.baidu.com') .then(resp=>resp.text()) // 转换成文本对象 .then(resp=>console.log(resp)) // 输出请求内容 .catch(error => console.er
-
浅谈Fetch 数据交互方式
获取资源很简单,发起一个请求出去,一个响应进来,然后该怎么操作就怎么操作. fetch 的 api 使用的是 promise 规范,不会 promise(用于延迟(deferred) 计算和异步(asynchronous ) 计算. 一个 Promise 对象代表着一个还未完成,但预期将来会完成的操作.主要使用它处理回调黑洞.) 的请花几分钟学习一下. 使用 fetch 去获取数据的方式: fetch("服务器地址") .then(function(response) { //将获取到
-
浅谈layui 数据表格前后台传值的问题
1.1查询 <script> layui.use('table', function() { var table = layui.table; table.render({ elem : '#demo', url : 'controller路径', { field: 'id', title: 'id'}, { field: 'username', title: '用户名'}, { field: 'sex', title: 性别'}, { field: 'city', title: '城市'}
-
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
如下所示: <script type="text/html" id="status"> {{# if(d.status === 1){ }} <span class="layui-badge layui-bg-green">正常</span> {{# } else { }} <span class="layui-badge">禁用</span> {{# } }} &l
-
浅谈MySQL数据查询太多会OOM吗
目录 全表扫描对server层的影响 全表扫描对InnoDB的影响 InnoDB内存管理 小结 我的主机内存只有100G,现在要全表扫描一个200G大表,会不会把DB主机的内存用光? 逻辑备份时,可不就是做整库扫描吗?若这样就会把内存吃光,逻辑备份不是早就挂了? 所以大表全表扫描,看起来应该没问题.这是为啥呢? 全表扫描对server层的影响 假设,我们现在要对一个200G的InnoDB表db1. t,执行一个全表扫描.当然,你要把扫描结果保存在客户端,会使用类似这样的命令: mysql -h$
-
浅谈Golang数据竞态
目录 一个数据竞态的case 检查数据竞态 解决方案 1.WaitGroup等待 2.Channel阻塞等待 3.Channel通道 4.互斥锁 典型数据竞态 1.循环计数上的竞态 2.意外共享变量 3.无保护的全局变量 4.原始无保护变量 5.未同步的发送和关闭操作 本文以一个简单事例的多种解决方案作为引子,用结构体Demo来总结各种并发读写的情况 一个数据竞态的case package main import ( "fmt" "testing" "ti
-
浅谈Docker数据持久化
容器中数据持久化主要有两种方式: 数据卷(Data Volumes) 数据卷容器(Data Volumes Dontainers) 数据卷 数据卷是一个可供一个或多个容器使用的特殊目录,可以绕过UFS(Unix File System). 数据卷可以在容器之间共享和重用 对数据卷的修改会立马生效 对数据卷的更新,不会影响镜像 数据卷默认会一直存在,即使容器被删除 一个容器可以挂载多个数据卷 注意:数据卷的使用,类似于 Linux 下对目录或文件进行 mount. 创建数据卷 示例: docker
-
浅谈Vue 数据响应式原理
前言 Vue的数据响应主要是依赖了Object.defineProperty(),那么整个过程是怎么样的呢?以我们自己的想法来走Vue的道路,其实也就是以Vue的原理为终点,我们来逆推一下实现过程. 本文代码皆为低配版本,很多地方都不严谨,比如 if(typeof obj === 'object')这是在判断obj是否为为一个对象,虽然obj也有可能是数组等其他类型的数据,但是本文为了简便,就直接这样写来表示判断对象,对于数组使用Array.isArray(). 改造数据 我们先来尝试写一个函数
-
浅谈Vue数据响应
Vue 中可以用 $watch 实例方法观察一个字段,当该字段的值发生变化时,会执行指定的回调函数(即观察者),实际上和 watch 选项作用相同.如下: vm.$watch('box', () => { console.log('box变了') }) vm.box = 'newValue' // 'box变了' 以上例切入,我想实现一个功能类似的方法 myWatch. 如何知道我观察的属性被修改了? -- Object.defineProperty 方法 该方法可以为指定对象的指定属性设置 g
-
浅谈Vue数据响应思路之数组
之前梳理Vue数据响应思路时没有考虑数组的情况. js 中数组有很多实例方法,其中有一部分会改变数组本身的值,比如 push pop shift unshift 等,这些方法被称为变异方法,这些变异方法也是 Vue 开发中常用的数组操作方法.那么要实现对数组的观测,首先要考虑的就是如何截获这些变异方法的调用. 简单来说,Vue 是通过保持这些数组变异方法原有功能不变的前提下,对其功能进行扩展来实现拦截的.具体怎么操作,可以先看一下例子: function add10(num) { return
-
浅谈Android Activity与Service的交互方式
实现更新下载进度的功能 1. 通过广播交互 Server端将目前的下载进度,通过广播的方式发送出来,Client端注册此广播的监听器,当获取到该广播后,将广播中当前的下载进度解析出来并更新到界面上. 优缺点分析: 通过广播的方式实现Activity与Service的交互操作简单且容易实现,可以胜任简单级的应用.但缺点也十分明显,发送广播受到系统制约.系统会优先发送系统级广播,在某些特定的情况下,我们自定义的广播可能会延迟.同时在广播接收器中不能处理长耗时操作,否则系统会出现ANR即应用程序无响应