html fetch,fetch的用法总结

　　Fetch概念

　　Fetch作为H5的一个新对象，是为了取代ajax的存在而诞生的。其主要目的只是结合ServiceWorkers来实现以下优化：

　　优化线下体验，保持可扩展性。当然，如果ServiceWorkers配合浏览器端数据库IndexedDB，那么恭喜你，每个浏览器都可以是代理服务器。(不过我觉得这不是好事，会让前端越来越重，走以前c/s架构的老路)

　　1. 前言

　　既然是h5的新方法，肯定有一些浏览器是旧版不支持的。对于不支持这种方法的人。

　　浏览器需要添加额外的聚合填充：

　　[链接]:https://github.com/fis-components/whatwg-fetch

　　2. 用法

　　费尔希(抓住):

　　HTML:

　　Fetch(/users.html) //这里返回的是一个Promise对象。不支持的浏览器在执行前需要相应的ployfill或由babel和其他转码器进行转码。然后(function(response){ return response . text()})。然后(function(body){ document . body . innerhtml=body }。

　　fetch(/users.json )。然后(function(response){ return response . JSON()})。然后(function(JSON){ console . log( parsed JSON ，json)})。catch(function(ex) { console.log(解析失败，ex)})响应元数据：

　　fetch(/users.json )。然后(function(response){ console . log(response . headers . get( Content-Type ))console . log(response . headers . get( Date ))console . log(response . status)console . log(response . status text)})发布表单：

　　var form=document . query selector( form )fetch(/users ，{ method: POST ，body:new FormData(form)})POST JSON:

　　Fetch (/users ，{method: post ，头：{accept: application/JSON ， content-type : application/JSON }，body:JSON . stringify({//这里是post请求的请求体名称： hubot ，login

　　var=input . query selector( input[type= file ])var data=new formdata()data . append( file ，input . files[0])//获取所选文件内容data.append(user ， hubot)fetch(/avatars ，{ method: POST ，body: data})3. 注意事项

　　(1)ajax和Ajax的区别：

　　1.fatch方法在捕获数据时即使是404或500错误也不会抛出错误，除非是网络错误或者在请求过程中被中断。但是当然，也有解决的办法。这是演示：

　　check status(response){ If(response . status=200 response . status 300){//确定响应的状态码是否正常返回response //正常返回原响应对象} Else { var error=new error(response . status text)//如果异常，则返回错误状态消息error . response=response throw error } }函数parse JSON(response){ return response . JSON()} fetch(/users )。然后(checkStatus)。然后(parseJSON)。然后(function(data) {console.log(请求成功，JSON响应，data)})。catch(function(error){ console . log(请求失败，错误)}) 2。一个很关键的问题，fetch方法不发送cookie，这对于保持客户端和服务器的持续连接是致命的，因为服务器需要通过cookie识别一个会话来保持会话状态。如果您想发送cookies，您需要修改信息：

　　Fetch (/users ，{credentials:同源//同域下发送cookie })Fetch( 3359 segment fault . com ，{credentials:包含//跨域下发送cookie })下图是跨域访问segment的结果。

　　Additional

　　如果不出意外，请求的url和响应的url是一样的，但是如果操作像redirect，response.url可能会不一样。在XHR，重定向后的response.url可能不准确，需要设置：response。头[x-request-URL]=请求。URL适用于(火狐32、Chrome 37、Safari、Safari

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读