ajax的替代方案,Fetch
2017-09-06 14:18
267 查看
前提
项目改版用到了一个新东西叫Fetch。这个东西挺不错的,总结一下。web发展能进入2.0时代,和ajax是分不开的。动态的获取数据,不刷新页面的方式非常的吸引人。现在我们有了fetch. 可以做和ajax一样的事情。就说明fetch一定是一个了不起的东西,虽然不清楚 他和 ajax相比 有哪些比较好的地方,但是所谓后来者居上,他一定有自己独特的好处,我现在刚刚接触,只能在用法上了解一些,期待后续更加深入的了解。
概念
Fetch API 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应。它还提供了一个全局 fetch()方法,该方法提供了一种简单,合乎逻辑的方式来跨网络异步获取资源fetch 规范与 jQuery.ajax() 主要有两种方式的不同
从 fetch()返回的 Promise 将不会拒绝HTTP错误状态, 即使响应是一个 HTTP 404 或 500。相反,它会正常解决 (其中ok状态设置为false), 并且仅在网络故障时或任何阻止请求完成时,它才会拒绝。默认情况下, fetch在服务端不会发送或接收任何 cookies, 如果站点依赖于维护一个用户会话,则导致未经认证的请求(要发送 cookies,必须发送凭据头).
一个基础的demo
let myImage = document.querySelector('img'); fetch('flowers.jpg') .then(function(response) { return response.blob(); }) .then(function(myBlob) { let objectURL = URL.createObjectURL(myBlob); myImage.src = objectURL; });
这里我们通过网络获取一个图像并将其插入到一个
<img>元素中。最简单的用法是只提供一个参数用来指明想fetch到的资源路径,然后返回一个包含响应结果的promise(一个 Response 对象)。
当然它只是一个 HTTP 响应,而不是真的图片。为了获取图片的内容,我们需要使用 blob() 方法(在Bodymixin 中定义,被 Request 和 Response 对象实现)。
如果你现在就想使用它,还可以用 Fetch Polyfill (https://github.com/github/fetch),用于支持那些还未支持 Fetch 的浏览器。记住它目前还支持在实验阶段。
自定义请求的参数
var myHeaders = new Headers(); var myInit = { method: 'GET', headers: myHeaders, mode: 'cors', cache: 'default' }; fetch('flowers.jpg',myInit) .then(function(response) { return response.blob(); }) .then(function(myBlob) { var objectURL = URL.createObjectURL(myBlob); myImage.src = objectURL; });
检测请求是否成功
如果遇到网络故障,fetch() promise 将会 reject,带上一个 TypeError 对象。虽然这个情况经常是遇到了权限问题或类似问题——比如 404 不是一个网络故障。想要精确的判断 fetch() 是否成功,需要包含 promise resolved 的情况,此时再判断 Response.ok 是不是为 true。类似一下代码:fetch('flowers.jpg').then(function(response) { if(response.ok) { response.blob().then(function(myBlob) { var objectURL = URL.createObjectURL(myBlob); myImage.src = objectURL; }); } else { console.log('Network response was not ok.'); } }) .catch(function(error) { console.log('There has been a problem with your fetch operation: ' + error.message); });
自定义请求对象
除了传给 fetch() 一个资源的地址,你还可以通过使用 Request() 构造函数来创建一个 request 对象,然后再作为参数传给 fetch():var myHeaders = new Headers(); var myInit = { method: 'GET', headers: myHeaders, mode: 'cors', cache: 'default' }; var myRequest = new Request('flowers.jpg', myInit); fetch(myRequest).then(function(response) { return response.blob(); }).then(function(myBlob) { var objectURL = URL.createObjectURL(myBlob); myImage.src = objectURL; });
Request() 和 fetch() 接受同样的参数。你甚至可以传入一个已存在的 request 对象来创造一个拷贝:
var anotherRequest = new Request(myRequest,myInit);
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");
也可以传一个多维数组或者对象字面量
myHeaders = new Headers({ "Content-Type": "text/plain", "Content-Length": content.length.toString(), "X-Custom-Header": "ProcessThisImmediately", });
它的内容可以被获取:
console.log(myHeaders.has("Content-Type")); // true console.log(myHeaders.has("Set-Cookie")); // false myHeaders.set("Content-Type", "text/html"); myHeaders.append("X-Custom-Header", "AnotherValue"); console.log(myHeaders.get("Content-Length")); // 11 console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"] myHeaders.delete("X-Custom-Header"); console.log(myHeaders.getAll("X-Custom-Header")); // [ ]
虽然一些操作只能在 ServiceWorkers 中使用,但是它提供了更方便的操作 Headers 的 API。
如果使用了一个不合法的HTTP Header属性名,那么Headers的方法通常都抛出 TypeError 异常。如果不小心写入了一个不可写的属性,也会抛出一个 TypeError 异常。除此以外的情况,失败了并不抛出异常。例如:
var myResponse = Response.error(); try { myResponse.headers.set("Origin", "http://mybank.com"); } catch(e) { console.log("Cannot pretend to be a bank!"); }
最佳实践是在使用之前检查 content type 是否正确,比如:
fetch(myRequest).then(function(response) { if(response.headers.get("content-type") === "application/json") { return response.json().then(function(json) { // process your JSON further }); } else { console.log("Oops, we haven't got JSON!"); } });
Guard
由于 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 都只读
Response 对象
如上述, Response 实例是在fetch()处理完promises之后返回的.它的实例也可用通过JavaScript来创建, 但只有在ServiceWorkers中才真正有用,当使用respondWith()方法并提供了一个自定义的response来接受request时:
var myBody = new Blob(); addEventListener('fetch', function(event 4000 ) { 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值.
Body
不管是请求还是响应都能够包含body对象. body也可以是以下任意类型的实例.ArrayBuffer ArrayBufferView (Uint8Array and friends) Blob/File string URLSearchParams FormData
Body 类定义了以下方法 (这些方法都被 Request 和Response所实现)以获取body内容. 这些方法都会返回一个被解析后的promise对象和数据.
arrayBuffer() blob() json() text() formData()
比起XHR来,这些方法让非文本化的数据使用起来更加简单。
请求体可以由传入body参数来进行设置:
var form = new FormData(document.getElementById('login-form')); fetch("/login", { method: "POST", body: form })
request 和response (也包括fetch() 方法)都会试着自动设置content type.如果没有设置Content-Type值,发送的请求也会自动设值.
资料:
传统 Ajax 已死,Fetch 永生(https://github.com/camsong/blog/issues/2)
FETCH api (https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API)
相关文章推荐
- 替代传统XMLHttpRequest的fetch方法实现ajax
- 传统的ajax将被fetch替代
- Ajax.BeginForm 异步上传附件 替代方案
- fetch将替代ajax?
- fetch实践 替代jquery封装的ajax
- Base: 一种Acid的替代方案
- 新一代Ajax API --fetch
- 微服务–分布式事务的实现方法及替代方案
- 框架基础:ajax设计方案(一)---集成核心请求
- 让AJAX不依赖后端接口实现方案
- MVC中,Ajax Post 数组的实现方案
- Flash Player 的两种开源替代方案
- 解决JAXB中接口不同内容相同的替代方案(续上)
- 解决SurfaceView设置透明造成覆盖其他组件的替代方案
- ios4.x sendAsynchronousRequest 替代方案
- .Net环境下基于Ajax的MVC方案
- Django Ajax跨域问题解决方案
- Windows应用替代方案接龙
- [Python] Mac OS 下 os.startfile 的替代方案
- CSS中box-reflect特性以及火狐浏览器替代方案