浅谈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);
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于uniapp小程序底部tabbar图标大小设置办法的相关资料,在使用uniapp进行开发时,tabbar是我们使用的很频繁的一个组件,但是在特定的平台会有一些使用上的限制,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了JS扩展类，克隆对象与混合类,通过自定义extend,clone与augment函数实例分析了类的扩展，对象的克隆与混合类相关实现与使用技巧,需要的朋友可以参考下2016-11-11
这篇文章主要为大家详细解析了BootStrap图片样式、辅助类样式和CSS组件源码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
今天小编就为大家分享一篇修改layui的后台模板的左侧导航栏可以伸缩的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要给大家介绍了关于JavaScript中for循环与双重for循环的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了微信小程序返回上一页传参并刷新过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
实现JS拖拽插件主要从六个方面做介绍：一、js拖拽插件的原理，二、根据原理实现的最基本效果，三、代码抽象与优化，四、扩展：有效的拖拽元素，五、性能优化和总结，六、jquery插件化 ,需要的朋友可以参考下2015-08-08
最近由于公司需要研究了一下微信小程序的开发,特此记录一下小程序获取授权的流程,便于自己理解,下面这篇文章主要给大家介绍了关于如何通过大白话理解微信小程序获取授权的相关资料,需要的朋友可以参考下2022-12-12
关于同时使用swiper和echarts遇到的问题及解决方法
这篇文章主要介绍了关于同时使用swiper和echarts遇到的问题及解决方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
如果不使用类库或者没有自己的类库，储备一些常用函数总是有好处的。2009-09-09
最新评论