什么是fetch

fetch是一种HTTP数据请求的方式，是XMLHttpRequest的一种替代方案。fetch不是ajax的进一步封装，而是原生js。Fetch函数就是原生js，没有使用XMLHttpRequest对象。

Fetch相比Ajax有什么优势?

XMLHttpRequest 是一个设计粗糙的 API，不符合关注分离（Separation of Concerns）的原则，配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好。·

Fetch 的出现就是为了解决 XHR 的问题，拿例子说明：

使用 XHR 发送一个 JSON 请求一般是这样：

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';

xhr.onload = function() {
 console.log(xhr.response);
};

xhr.onerror = function() {
 console.log("Oops, error");
};

xhr.send();

使用 Fetch 后，顿时看起来好一点

fetch(url).then(function(response) {
 return response.json();
}).then(function(data) {
 console.log(data);
}).catch(function(e) {
 console.log("Oops, error");
});

使用 ES6 的 箭头函数 后：·

//code from http://caibaojian.com/fetch-ajax.html
fetch(url).then(response => response.json())
 .then(data => console.log(data))
 .catch(e => console.log("Oops, error", e))

使用 async await 之后：

try {
 let response = await fetch(url);
 let data = await response.json();
 console.log(data);
} catch(e) {
 console.log("Oops, error", e);
}

Fetch 优点主要有：·

1. 语法简洁，更加语义化

2. 基于标准 Promise 实现，支持 async/await

3. 同构方便，使用 isomorphic-fetch

语法

1、第一个参数是url
2、第二个是可选参数，可以控制不同配置的 init 对象

Promise<Response> fetch(url[, init]);

url

定义要获取的资源。这可能是：

• 一个 USVString 字符串，包含要获取资源的 URL。一些浏览器会接受 blob: 和 data: 作为 schemes.

• 一个 Request 对象。

init 可选

一个配置项对象，包括所有对请求的设置。可选的参数有：

• method: 请求使用的方法，如 GET、POST。

• headers: 请求的头信息，形式为 Headers 的对象或包含 ByteString 值的对象字面量。

• body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。

• mode: 请求的模式，如 cors、 no-cors 或者 same-origin。

• credentials: 请求的 credentials，如 omit、same-origin 或者 include。为了在当前域名内自动发送 cookie ， 必须提供这个选项， 从 Chrome 50 开始， 这个属性也可以接受 FederatedCredential 实例或是一个 PasswordCredential 实例。

• cache: 请求的 cache 模式: default 、 no-store 、 reload 、 no-cache 、 force-cache 或者 only-if-cached 。

• redirect: 可用的 redirect 模式: follow (自动重定向), error (如果产生重定向将自动终止并且抛出一个错误), 或者 manual (手动处理重定向). 在Chrome中，Chrome 47之前的默认值是 follow，从 Chrome 47开始是 manual。

• referrer: 一个 USVString 可以是 no-referrer、client或一个 URL。默认是 client。

• referrerPolicy: 指定了HTTP头部referer字段的值。可能为以下值之一：no-referrer、 no-referrer-when-downgrade、 origin、 origin-when-cross-origin、 unsafe-url 。

• integrity: 包括请求的 subresource integrity 值 （ 例如：sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）。

eg：

fetch和ajax 的主要区别

1、fetch() 返回的 promise 将不会拒绝http的错误状态，即响应是一个HTTP 404或者 500 时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。
2、在默认情况下 fetch不会接受或者发送cookies

浏览器兼容性

目前Chrome 42+, Opera 29+, 和Firefox 39+都支持Fetch。微软也考虑在未来的版本中支持Fetch。

fetch 在移动端使用是基本上是没有问题的，但是如果您需要在IE8+的浏览器使用，则你需要引入 polyfill 库。

polyfill 传送门： https://github.com/taylorhakes/promise-polyfill

或者使用 fetch.js 兼容到 ie9+

fetch.js 传送门 ：https://github.com/github/fetch

 IT大咖说  |  关于版权 

感谢您对IT大咖说的热心支持！

点击【阅读原文】更多IT技术