微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

【备忘】:fetch API获取返回值的方式

使用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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐