fetch 另一种ajax解决方案

AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。

 

传统的ajax：  XMLHttpRequest（XHR），配置麻烦，写起来不好看。

非传统ajax： Fetch，基于promise，配置方便，简单明了。

 

fetch最简单的用法就是 

fetch(url，{配置参数，可选})

.then(

　 对返回的包含响应结果的promise进行处理

    这个promise只是一个 HTTP 响应，而不是真的JSON。为了获取JSON的内容，我们需要使用  json()方法

    如return response.json();

)

.then(

　　对第一个then返回的对象进行处理

)

上面的代码使用then方法，依次指定了两个回调函数。第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。

 

配置参数比如：

　　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

 

---

 fetch规范

• 当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject， 即使该 HTTP 响应的状态码是 404 或 500。

　　   相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。

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

 

基于第一条规范检测请求是否成功：

fetch('flowers.jpg').then(function(response) {

　　 if(response.ok) {

　　　　 return response.blob();

　　　}

　　 throw new Error('Network response was not ok.');

})

.then(function(myBlob) {

　　 var objectURL = URL.createObjectURL(myBlob);

　　 myImage.src = objectURL;

})

.catch(function(error) {

　　 console.log('There has been a problem with your fetch operation: ', error.message);

});

---

对于那些不支持fetch的浏览器 有  A window.fetch JavaScript polyfill. http://github.github.io/fetch/