Ajax,2005年诞生的技术,至今已持续了 10 年。它是一种在客户端创建一个异步请求的技术,本质上它不算创新,是一组技术的组合。它的核心对象是 XMLHttpRequest。
简单回顾下历史
使用步骤大概如下
var xhr = new XMLHttpRequest();
xhr.open(‘GET‘, url);
xhr.onload = function() {
// To do with xhr.response
};
xhr.onerror = function() {
// Handling errors
};
xhr.send();
以上可以看出,XHR 使用 onXXX 处理,典型的 "事件模式"。
Fetch 目前还不是 W3C 规范,由 whatag 负责出品。与 Ajax 不同的是,它的 API 不是事件机制,而采用了目前流行的 Promise 方式处理。我们知道 Promise 是已经正式发布的 ES6 的内容之一。
fetch(‘doAct.action‘).then(function(res) {
if (res.ok) {
res.text().then(function(obj) {
// Get the plain text
})
}
}, function(ex) {
console.log(ex)
})
以上 fetch 函数是全局的,目前最新的Firefox,Chrome,Opera 都已支持,详见


以上是一个最简单的请求,只要传一个参数 url 过去,默认为 get 请求,获取纯文本,fetch 第二个参数可以进行很多配置,比如 POST 请求
fetch("doAct.action", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: "keyword=荣耀7i&enc=utf-8&pvid=0v3w1kii.bf1ela"
}).then(function(res) {
if (res.ok) {
// To do with res
} else if (res.status == 401) {
// To do with res
}
}, function(e) {
// Handling errors
});
如果返回的是 JSON, 如下
fetch(‘doAct.action‘).then(function(res) {
if (res.ok) {
res.json().then(function(obj) {
// Get the JSON
})
}
}, function(ex) {
console.log(ex)
})
res 实际上该规范定义的 Response 对象,它有如下方法
相关:
https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalFetch/fetch
https://fetch.spec.whatwg.org
https://hacks.mozilla.org/2015/03/this-api-is-so-fetching
原文:http://www.cnblogs.com/snandy/p/5076512.html