探索 Fetch API

最后更新:
阅读次数:

XMLHttpRequest 已经存在了好长时间,我们常用它来执行异步请求,但是由于它在设计上不符合职责分离原则,将输入、输出和用事件来跟踪的状态混杂在一个对象里, 所以它不是最佳 API,Fetch API 的出现,旨在修复这些缺陷。

以上就是 Fetch 的核心 API。当然,上面列出的几个对象都有各自的属性和方法,这个我就先不一一展开了,以后有空了再补。(其实看 MDN 文档就已经足够了)

下面举两个例子,一个是通过 fetch 请求文本数据,另一个是通过 fetch 请求一张图片。(将代码复制粘贴于控制端下运行)

// 当前页面: http: //www.baidu.com/

// 请求文本数据(Handling Basic Text/HTML Response)
var request = new Request("http://blog.percymong.com/js/user.js", {
mode: "cors"
});

window
.fetch(request)
.then(
function(response) {
if (response.ok) {
return response.text();
} else {
console.log(
"Looks like the response wasn't perfect, got status",
response.status
);
}
},
function(error) {
console.log("Fetch failed,", error);
}
)
.then(function(data) {
document.body.innerHTML = `${data}"`;
});
// 当前页面: http: //www.baidu.com/

// 请求一张图片(Blob Responses)
var request = new Request("http://blog.percymong.com/img/avatar.png", {
mode: "cors"
});

window
.fetch(request)
.then(
function(response) {
if (response.ok) {
return response.blob();
} else {
console.log(
"Looks like the response wasn't perfect, got status",
response.status
);
}
},
function(error) {
console.log("Fetch failed,", error);
}
)
.then(function(data) {
document.body.innerHTML = `<img src="${URL.createObjectURL(data)}" />`;
});

参考资料