Fetch API简单学习
跨网络异步获取资源的功能以前是使用XMLHttpRequest对象实现的,Fetch API提供了更好的替代方案,可以很容易的被其他技术使用(如Servise Workers)
Fetch API提供了一个全局的fetch()方法,这个方法提供了一种简单的、合乎逻辑的方式来跨网络异步获取资源。fetch()方法接收两个参数:第一个参数表示要获取的资源路径;第二个参数表示请求的配置项(可选)。该方法会返回一个Promise
当fetch请求接收到一个代表错误的状态码时(如404、500),返回的Promise不会被标记为reject,而是被标记为resolve,但是会将response的ok属性设置为false。只有当网络错误或请求被阻止时才会被标记为reject状态
默认情况下, fetch 不会从服务端发送或接收任何 cookies,要发送 cookies,必须设置 credentials 选项
**注意:** IE浏览器不支持
### fetch请求
请求一张图片,图片请求成功后插入到img标签中
```html
```
![](https://cdn.86886.wang/blog/1536232335894.png)
### 自定义第二个参数
#### GET 请求
```js
fetch('https://www.86886.wang/api/articles/1/3', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
cache: 'default',
mode: 'cors',
}).then(function(res){
if(res.ok) {
return res.json();
}
}).then(function(data) {
console.log(data)
})
```
![](https://cdn.86886.wang/blog/1536232345461.png)
#### POST请求
```js
fetch('https://www.86886.wang/api/article', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
token: 'asdf'
},
body: JSON.stringify({
title: 'fetch API学习',
content: '文章内容'
})
}).then(function(res){
if(res.ok) {
return res.json();
}
}).then(function(data) {
console.log(data)
})
```
![](https://cdn.86886.wang/blog/1536232354999.png)
### 检测成功
成功的状态只有一种,即response.ok属性为true。失败的情况有很多种,如404、500、网络中断
```js
fetch('https://cdn.86886.wang/blog/152004990125.jpg').then(function(res){
if(res.ok) {
return res.blob();
}else {
console.log('服务器响应出错了'); // 资源404、服务器500等
}
}).catch(function(err){
console.log('Network response was not ok.'); // 网络出错
})
```
![](https://cdn.86886.wang/blog/1536232366727.png)