WebKong的网络日志

分享工作中的所用、所想、所感。

0%

Fetch新鲜的Ajax

老骥伏枥,志在千里

Fetch 是一个现代的概念, 等同于 XMLHttpRequest。它提供了许多与XMLHttpRequest相同的功能,但被设计成更具可扩展性和高效性。

简而言之

Fetch 的核心在于对 HTTP 接口的抽象,包括 Request,Response,Headers,Body,以及用于初始化异步请求的 global fetch。得益于 JavaScript 实现的这些抽象好的 HTTP 模块,其他接口能够很方便的使用这些功能。

除此之外,Fetch 还利用到了请求的异步特性——它是基于 Promise 的。

说白了,Fetch是从后台获取数据的一种更优的解决方案,甚至可以说是XMLHttpRequest的替代方案。

但是fetch与ajax或者axios库有不同的点:
1.当接收到一个代表错误的 HTTP 状态码时,从 fetch()返回的 Promise 不会被标记为 reject, 即使该 HTTP 响应的状态码是 404 或 500。相反,它会将 Promise 状态标记为 resolve (但是会将 resolve 的返回值的 ok 属性设置为 false ),仅当网络故障时或请求被阻止时,才会标记为 reject。

这个特点对于restfulAPI具有很好的交互。

2.默认情况下,fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session,则会导致未经认证的请求(要发送 cookies,必须设置 credentials 选项)。

支持程度

目前只有谷歌和火狐浏览器的最新版本支持

demo

1
2
3
4
5
6
7
fetch('http://example.com/example.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
fetch(url, {
body: JSON.stringify(data), // must match 'Content-Type' header
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, same-origin, *omit
headers: {
'user-agent': 'Mozilla/4.0 MDN Example',
'content-type': 'application/json'
},
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, cors, *same-origin
redirect: 'follow', // manual, *follow, error
referrer: 'no-referrer', // *client, no-referrer
})
.then(response => response.json()) // parses response to JSON

发送带凭据的请求
为了让浏览器发送包含凭据的请求(即使是跨域源),要将credentials: ‘include’添加到传递给 fetch()方法的init对象。

1
2
3
fetch('https://example.com', {
credentials: 'include'
})

如果你只想在请求URL与调用脚本位于同一起源处时发送凭据,请添加credentials: ‘same-origin’。

// The calling script is on the origin ‘https://example.com'

1
2
3
fetch('https://example.com', {
credentials: 'same-origin'
})

要改为确保浏览器不在请求中包含凭据,请使用credentials: ‘omit’。

1
2
3
fetch('https://example.com', {
credentials: 'omit'
})

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch