ajax 请求_舍弃ajax，使用fetch发起后端请求-CSDN博客

什么是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.htmlfetch(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 优点主要有：·

语法简洁，更加语义化
基于标准 Promise 实现，支持 async/await
同构方便，使用 isomorphic-fetch

语法

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

Promise 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