fetch一下

AJAX即“Asynchronous JavaScript and XML”(异步的JavaScriptXML技术),指的是一套综合了多项技术的浏览器网页开发技术。

传统的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/

 

猜你喜欢

转载自www.cnblogs.com/cheeseCatMiao/p/9914306.html