Fork me on GitHub

简单了解fetch API

fetch() 允许我们发出类似于 XMLHttpRequest(XHR)的网络请求。 主要区别在于 Fetch API 使用 Promises ,这使我们避免了回调地狱,并且不需要再记住 XMLHttpRequest 的复杂API。

一、fetch()XMLHttpRequest 的使用差异

王二在这里放两个简单的示例来体现他们的使用差异,如下:

1、使用 XMLHttpRequest 请求数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>测试XMLHttpRequest请求</p>
<script>
function reqListener() {
console.log(this.responseText);
}
var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", "test.json", true);
oReq.send();
</script>
</body>
</html>

2、使用 fetch 请求数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>测试Fetch请求</p>
<script>
fetch('test.json').then(function(res) {
return res.text();
}).then(function(data) {
console.log(data)
});
//箭头函数表达更清爽
//fetch("test.json").then(res=>res.text().then(data=>{console.log(data)}))
</script>
</body>
</html>

需要注意的是,以上代码需要在本地启动一个HTTPServer,并在示例代码的同一级目录下放一个test.json 才能正常演示。

二、fetch() 的具体语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
fetch(url, {
method: "POST",
body: JSON.stringify(data),
headers: {
"Content-Type": "application/json"
},
credentials: "same-origin"
}).then(function(response) {
response.status //=> number 100–599
response.statusText //=> String
response.ok //=> Boolean
response.headers //=> Headers
response.url //=> String
return response.text()
}, function(error) {
error.message //=> String
})

如上述代码有两个地方需要注意:

1、 fetch() 可以接受第二个可选参数,一个可以控制不同配置的 init 对象,详细参数配置可以看这里

2、fetch()处理完promises之后会返回一个Response对象,我们会看到一些常见的 response 属性,例如:

  • Response.status — 整数(默认值为200) 为response的状态码.
  • Response.statusText — 字符串(默认值为”OK”),该值与HTTP状态码消息对应.
  • Response.ok — 如上所示, 该属性是来检查response的状态是否在200-299(包括200,299)这个范围内.该属性返回一个Boolean值.

response对象上还有一些常用的方法,例如,blob()json()text(),可以帮我们处理不同的数据类型,参考下图:

Alt text

三、参考阅读:

Fetch的MDN文档中文版

XMLHttpRequest的MDN文档中文版

谷歌开发者文档 “Introduction to fetch()”

fetch API

fetch documentation

-------------本文结束感谢您的阅读-------------