Why Fetch
在开发过程中,我们向服务端发送请求,一般会使用三种方式, XMLHttpRequest(XHR),Fetch ,jQuery实现的AJAX。
其中, XMLHttpRequest(XHR)和Fetch是浏览器的原生API,jquery的ajax其实是封装了XHR。
Fetch 的出现就是为了解决 XHR 的问题,拿例子说明:
使用 XHR 发送一个 json 请求一般是这样:
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';
xhr.onload = function() {
console.log(xhr.response);
};
xhr.onerror = function() {
console.log("Oops, error");
};
xhr.send();
使用 Fetch 后,顿时看起来好一点
fetch(url).then(function(response) {
return response.json();
}).then(function(data) {
console.log(data);
}).catch(function(e) {
console.log("Oops, error");
});
Fetch
fetch(...).then(fun2)
.then(fun3) //各依赖有序执行
.....
.catch(fun)
从上边的代码可以看出,fetch用起来想jQuery一样简单,虽然还是有Callback的影子,但是看起来舒服多了
详解Fetch API
兼容性
注意:由于Fetch API是基于Promise设计,旧浏览器不支持Promise,需要使用pollyfill es6-promise
Fetch使用说明
fetch(url, options).then(function(response) {
// handle HTTP response
}, function(error) {
// handle network error
})
说明:
a. fetch api返回的是一个promise对象
b.Options:
method(String): HTTP请求方法,默认为GET
body(String): HTTP的请求参数
headers(Object): HTTP的请求头,默认为{}
credentials(String): 默认为omit,忽略的意思,也就是不带cookie;还有两个参数,same-origin,意思就是同源请求带cookie;include,表示无论跨域还是同源请求都会带cookie
status(number): HTTP返回的状态码,范围在100-599之间
statusText(String): 服务器返回的状态文字描述,例如Unauthorized,上图中返回的是Ok
ok(Boolean): 如果状态码是以2开头的,则为true
headers: HTTP请求返回头
body: 返回体,这里有处理返回体的一些方法
text(): 将返回体处理成字符串类型
json(): 返回结果和 JSON.parse(responseText)一样
blob(): 返回一个Blob,Blob对象是一个不可更改的类文件的二进制数据
arrayBuffer()
formData()
缺少其它一些方法:always,progress,finally
always 可以通过在 then 和 catch 里重复调用方法实现。finally 也类似。progress 这种进度通知的功能还没有用过,暂不知道如何替代。