JS Fetch
使用Fetch
1、进行 fetch 请求
一个基本的 fetch请求设置起来很简单。看看下面的代码:
fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
这里我们通过网络获取一个JSON文件并将其打印到控制台。最简单的用法是只提供一个参数用来指明想fetch()
到的资源路径,然后返回一个包含响应结果的promise(一个 Response
对象)。
2、Headers
使用 Headers
的接口,你可以通过 Headers()
构造函数来创建一个你自己的 headers 对象。一个 headers 对象是一个简单的多名值对:
var content = "Hello World";
var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Content-Length", content.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
由于 Headers 可以在 request 请求中被发送或者在 response 请求中被接收,并且规定了哪些参数是可写的,Headers 对象有一个特殊的 guard 属性。这个属性没有暴露给 Web,但是它影响到哪些内容可以在 Headers 对象中被操作。
可能的值如下:
none
:默认的request:
从 request 中获得的 headers(Request.headers
)只读request-no-cors
:从不同域(Request.mode
no-cors
)的 request 中获得的 headers 只读response
:从 response 中获得的 headers(Response.headers
)只读immutable
:在 ServiceWorkers 中最常用的,所有的 headers 都只读。
3、Response 对象
如上述, Response
实例是在fetch()处理完promises之后返回的.
它的实例也可用通过JavaScript来创建, 但只有在ServiceWorkers
中才真正有用,当使用respondWith()
方法并提供了一个自定义的response来接受request时:
var myBody = new Blob(); addEventListener('fetch', function(event) {
event.respondWith(new Response(myBody, {
headers: { "Content-Type" : "text/plain" }
});
});
Response()
构造方法接受两个可选参数—response的数据体和一个初始化对象(与Request()
所接受的init参数类似.)
你会用到的最常见的response属性有:
Response.status
— 整数(默认值为200) 为response的状态码.Response.statusText
— 字符串(默认值为"OK"),该值与HTTP状态码消息对应.Response.ok
— 如上所示, 该属性是来检查response的状态是否在200-299(包括200,299)这个范围内.该属性返回一个Boolean
值.
4、Body
不管是请求还是响应都能够包含body对象. body也可以是以下任意类型的实例.
ArrayBuffer
ArrayBufferView
(Uint8Array and friends)Blob
/File- string
URLSearchParams
FormData
Body
类定义了以下方法 (这些方法都被 Request
和Response
所实现)以获取body内容. 这些方法都会返回一个被解析后的promise对象和数据.
比起XHR来,这些方法让非文本化的数据使用起来更加简单。
请求体可以由传入body参数来进行设置:
var form = new FormData(document.getElementById('login-form'));
fetch("/login", {
method: "POST",
body: form
})
request和response(包括fetch()
方法)都会试着自动设置Content-Type
。如果没有设置Content-Type
值,发送的请求也会自动设值。
5、特性检测
Fetch API 的支持情况,可以通过检测Headers
, Request
, Response
或 fetch()
是否在Window
或 Worker
域中。例如:
if(self.fetch) {
// run my fetch request here
} else {
// do something with XMLHttpRequest?
}
JS Fetch的更多相关文章
- js fetch处理异步请求
以往一直认为异步请求只能使用原生js的XMLHttpRequest或jQuery的$.ajax().$.post()等框架封装的异步请求方法 原来js还提供fetch来替代XMLHttpRequest ...
- js Fetch返回数据res.json()报错问题
前言 一直以来在简单的场景中经常使用fetch代替第三方请求库, fetch是JavaScript的原生函数, 简单.高效.快速.稳定.可定制等等诸多优点.一直也是用着很是舒服,直到有一天它竟然报错了 ...
- js fetch api
MDN fatch 返回的对象 type string url string redirected boolean status number ok boolean statusText string ...
- js fetch异步请求使用详解
目录 认识异步 fetch(url) response.json() 结合async和await 异常处理 post请求 认识异步 首先我们得明白请求是一个异步的过程. 因为请求需要时间向服务器发送请 ...
- 在 JS 中使用 fetch 更加高效地进行网络请求
在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,此文将简要介绍下 fetch 的基本使用. 我的源博客地址:http://blog.parryqiu.com/2016/03/ ...
- flask 与 vue.js 2.0 实现 todo list
实现了后端与前端分离,后端提供 RESTful api. 后端 flask 与前端 vue 的数据传输都是 json. 本文使用 vue.js 2.0 对前一个例子:flask, SQLAlchemy ...
- 如何使用fetch
Fetch API 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应.它还提供了一个全局fetch()方法,该方法提供了一种简单,合乎逻辑的方式来跨网络异步获取 ...
- 关于commonjs,AMD,CMD之间的异同
1.简介 随着前端业务复杂度的增加,模块化成为一个大的趋势.而在ES6还未被浏览器所支持的情况下,commonjs作为ES6中标准模块加载方案,在客服端中的支持情况并不好,现在在客服端中有2中模块化的 ...
- 已配置好的vue全家桶项目router,vuex,api,axios,vue-ls,async/await,less下载即使用
github 地址: https://github.com/liangfengbo/vue-cli-project 点击进入 vue-cli-project 已构建配置好的vuejs全家桶项目,统一管 ...
随机推荐
- Python爬虫基础之lxml
一.Python lxml的基本应用 <html> <head> <title> The Dormouse's story </title> </ ...
- redis安装教程 windows环境
redis开始入坑啦 安装: gayhub地址:https://github.com/MicrosoftArchive/redis/releases 我装的是win7 64系统 选了第二个 在E盘新 ...
- bzoj 3998
我们分成两种情况来分析这个问题:t=0和t=1 t=1时,每一个子串出现的次数就是他在parent树上所在子树内前缀节点的个数,这一点我们已经说的很清楚了 利用SAM有向无环的性质,我们可以在pare ...
- python3+Robot Framework+PyCharm环境部署及执行脚本
Robot Framework是一个非常优秀的开源关键字驱动自动化测试框架,目前已经支持python2和python3,但是GUI界面RIDE只支持python2,但是python的未来是python ...
- adjustsFontSizeToFitWidth 与 NSLineBreakByCharWrapping 无法共用
newLabel.lineBreakMode = NSLineBreakByCharWrapping; newLabel.text = content; newLabel.adjustsFontSiz ...
- Spring boot实现原生websocket
网上的大部分教程是基于sockjs,这篇文章内容则是基于原生协议. 后台Spring boot 配置 @Configuration @EnableWebSocket public class WebS ...
- DDD - 概述 - 聚合 (三)
不要再看那些理论啦,说的云里雾里的,绕到你怀疑人生 一句话概括聚合创建:聚合的一致性决定了聚合边界的确定,决定了聚合对象的创建.所谓的一致性即事务的一致性,细化就是 立即性和原子性.
- ImCash:韩国最大交易所遭遇至暗时刻:2018年亏损1.8亿美元
Bithumb上个月遭到黑客攻击,随后要求用户小心存款,该公司报告称损失1.8亿美元(合2050亿韩元). 据<韩国时报>(Korea Times)报道:受到熊市影响,数字货币交易所实际交 ...
- PCA:利用PCA(四个主成分的贡献率就才达100%)降维提高测试集辛烷值含量预测准确度并《测试集辛烷值含量预测结果对比》—Jason niu
load spectra; temp = randperm(size(NIR, 1)); P_train = NIR(temp(1:50),:); T_train = octane(temp(1:50 ...
- 百度地图Web引用
上海中心二楼 示例 http://api.map.baidu.com/geocoder?address=北京市海淀区上地信息路9号奎科科技大厦&output=html&src=weba ...