今天汇总下JavaScript的Fetch方法，这是Ajax技术的第三篇。
一个基本的 fetch请求设置起来很简单。看看下面的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>fetch</title>
</head>
<body>
<h3>显示数据：</h3>
<p class="showData"></p>
<script src="./fetch.js"></script>
</body>
</html>
window.onload = function () {
fetch('http://jsonplaceholder.typicode.com/posts/1')
.then(function (response) {
return response.json();
})
.then(function (myJson) {
console.log(myJson);
document.querySelector('.showData').innerHTML = myJson.title
});
}
以上这段也可以简写成下面这样：
window.onload = function () {
fetch('http://jsonplaceholder.typicode.com/posts/1')
.then(function (res) {
res.json().then(function (myJson) {
document.querySelector('.showData').innerHTML = myJson.title
})
})
}
res 实际上该规范定义的 Response 对象，它有如下方法
1. arrayBuffer()
2. blob()
3. json()
4. text()
5. formData()
Fetch 由 whatag 负责出品。与 Ajax 不同的是，它的 API 不是事件机制，而采用了目前流行的 Promise 方式处理。我们知道 Promise 是已经正式发布的 ES6 的内容之一。
fetch 第二个参数可以进行很多配置，比如 POST 请求。
window.onload = function () {
fetch('http://jsonplaceholder.typicode.com/posts/1', {
method: 'POST',
headers: {
"content-type": "application/x-www-form-urlencoded"
},
body: "foo=bar&lorem=ipsum"
})
.then(function (response) {
return response.json();
})
.then(function (myJson) {
console.log(myJson);
document.querySelector('.showData').innerHTML = myJson.title
});
}
此外，Fetch 跨域请求时默认不会带 cookie，需要时得手动指定 credentials: 'include'
fetch('doAct.action', {credentials: 'include'}).then(function(res) {
// ...
})
Fecth 获取 HTTP 头信息非常容易
// 取HTTP头信息
fetch('doAct.action').then(function(response) {
console.log(response.headers.get('Content-Type'));
console.log(response.headers.get('Date'));
});
Fetch 也可以链式使用
function status(response) {
if (response.status >= 200 && response.status < 300) {
return Promise.resolve(response)
} else {
return Promise.reject(new Error(response.statusText))
}
}
function json(response) {
return response.json()
}
fetch('doAct.action')
.then(status)
.then(json)
.then(function(data) {
console.log('Request succeeded with JSON response', data);
}).catch(function(error) {
console.log('Request failed', error);
});
Fetch 模拟表单提交
fetch('doAct.action', {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'foo=bar&lorem=ipsum'
})
.then(json)
.then(function (data) {
console.log('Request succeeded with JSON response', data);
})
.catch(function (error) {
console.log('Request failed', error);
});
使用AJAX提交表单数据
fetch('https://davidwalsh.name/submit', {
method: 'post',
body: new FormData(document.getElementById('comment-form'))
});
浏览器支持
Chrome
Firefox
Safari 6.1+
Internet Explorer 10+
网友评论