使用fetch API来做后端请求,相比较传统的Ajax方式,在写出的代码上更加容易理解,也更便于别人看懂。但是在使用的过程中,经常有同学不能顺利从传统的Ajax请求(如果使用jquery的话,就是$.ajax,$.post,$.get)转移到新的fetch方式,很多时候就是卡在了获取响应数据的环节上。


用fetch来获取数据,如果响应正常返回,我们首先看到的是一个response对象,其中包括返回的一堆原始字节,这些字节需要在收到后,需要我们通过调用方法将其转换为相应格式的数据,比如JSON,BLOB或者TEXT等等。


比如,我们通过下面的请求,是无法读取到网页内容的:

fetch('https://www.baidu.com/').then(res => console.log(res))

打印出来的仅仅是一个原始的response对象而已,从中看不到任何的返回内容。而为了能够读取到返回的内容,我们需要在收到response对象后,立即将其转换为我们想要的格式,比如TEXT:
fetch('https://www.baidu.com/').then(res => res.text()).then(res => console.log(res))

这样,我们能看到控制台正确输出了返回的网页内容。通过第二次回调才能获取到具体的返回数据,这可能是一开始使用fetch时,让我们感到不太习惯的地方,但是当我们习惯之后,fetch的接口用起来是非常直观和便利的。


如果返回的数据是json,就可以调用res.json()方法,将返回内容转成json对象,除此之外还有转换为其它类型数据的方法,具体请参考如下的资源:


参考文章:https://davidwalsh.name/fetch

官方文档:https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

【备忘】:fetch API获取返回值的方式的更多相关文章

  1. 关于h5中的fetch方法解读(小结)

    这篇文章主要介绍了关于h5中的fetch方法解读(小结),fetch身为H5中的一个新对象,他的诞生,是为了取代ajax的存在而出现,有兴趣的可以了解一下

  2. PhoneGap / iOS上的SQLite数据库 – 超过5mb可能

    我误解了什么吗?Phonegap中的sqlitedbs真的有5mb的限制吗?我正在使用Phonegap1.2和iOS5.解决方法您可以使用带有phonegap插件的原生sqliteDB,您将没有任何限制.在iOS5.1中,Websql被认为是可以随时删除的临时数据…

  3. ios – 使用带有NodeJs HTTPS的certificates.cer

    我为IOS推送通知生成了一个.cer文件,我希望将它与NodeJSHTTPS模块一起使用.我发现HTTPS模块的唯一例子是使用.pem和.sfx文件,而不是.cer:有解决方案吗解决方法.cer文件可以使用两种不同的格式进行编码:PEM和DER.如果您的文件使用PEM格式编码,您可以像使用任何其他.pem文件一样使用它(有关详细信息,请参见Node.jsdocumentation):如果您的文件使

  4. ios – CFNetwork内部错误:URLConnectionLoader.cpp:289

    当我在一段时间后打开我的应用程序时,我收到了日志:440:CFNetworkinternalerror(0xc01a:/buildroot/Library/Caches/com.apple.xbs/Sources/CFNetwork/CFNetwork-758.4.3/Loading/URLConnectionLoader.cpp:289)它从未出现在过去.我的项目使用网络库AFNetworkin

  5. ios – 使用大写符号在字符串swift中获取URL的正则表达式

    我尝试在文本中获取URL.所以,在此之前,我使用了这样一个表达式:但是当用户输入带有大写符号的URL时(例如Http://Google.com,它与它不匹配)我遇到了问题.我试过了:但什么都没发生.解决方法您可以使用正则表达式中的i内联标志关闭区分大小写,有关可用正则表达式功能的详细信息,请参阅FoundationFrameworkReference.(?ismwx-ismwx)Flagsetti

  6. ios – xcode在更新可可豆荚后出现体系结构错误的重复符号

    编辑:执行下面显示的解决方案后,我的项目只编译iPadAir,我不能再存档,我仍然得到相同的错误…

  7. ios – UIWebView中的WebSQL / SQLite数据库的最大大小(phonegap)

    我知道一般来说,Web应用程序的本地存储空间有5MB的限制.本地网页浏览应用程式是否也有这个限制?

  8. ios – 我可以使用自签名SSL证书服务器在空中部署企业应用吗?

    iOS7.1之后,如果我们要通过空中部署我们的Enterprise应用程序,则manifest.plist文件的URL必须是HTTPS.例如:在我的服务器中,我使用自签名SSL证书.当我点击iPhone上的URL时,它表示无法连接到并记录典型的所以,我想知道我是否可以使用自签名SSL证书?如果可以,我如何解决我遇到的问题的问题?

  9. ios – 如何使用YouTube API V3?

    我想知道如何在iOS应用中使用新的YouTubeAPI(第3版),但我不知道如何做.我做了很多关于它的研究,但是我发现所有的例子和老API的代码,所以它们是无效的.现在,我明白了,使用新的API你必须在Google开发者控制台中创建一个项目…使用API2很简单它…

  10. 如何在iOS Couchbase Mobile上使用HTTPS复制?

    我正在使用iOSCouchbaseMobile在iPad上使用一个couchdb服务器,它使用复制与服务器进行同步.cloudant使用HTTPS,当我尝试在iPad上复制时,我只是被错误地垃圾邮件发送.这是一个已知的问题,如thisFAQarticle所示.它建议使用1.0.2修复问题,但是如何知道我是否在ErlangR14上运行?

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到<input>中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部