es6中fetch的用法是什么
时间:2022-05-06 [网络编程]作者:fabuyuan 浏览:5 次
es6中,fetch用于发起远程资源的请求,是提供跨网络异步获取资源的方法;该方法被定义在BOM的window对象中,返回一个Promise对象,语法“fetch(url,配置对象).then(function(response){})”。
本教程操作环境:windows10系统、ECMAScript 6.0版、Dell G3电脑。
es6中fetch的用法是什么
fetch的基本语法
fetch(url,init).then(function(response) { } )
es6 fetch怎么使用?JavaScript
fetch的参数说明
fetch接收两个参数,第一个为地址且必填,第二个为配置对象可选。
如果是简单的无参数get请求,那么可以不要第二个参数(默认为get请求),当然也可以加上来对此fetch进行一些说明
第二个参数包含请求类型,发送数据,headers,模式等
fetch方法返回的也是一个promise对象,我们只能使用then来获取返回数据,
我们需要两次then才能对后台返回得到数据进行处理,在第一个then里面return result.text(), 或者 return result.json(), 然后第二个参数里面才能真正的获取到返回的具体值,并且对其进行逻辑处理
如果要判断请求是否失败,那么请在第一次的then里面判断,那里面为请求数据对象。
Fetch API提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应。它还提供了一个全局 fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。
这种功能以前是使用 XMLHttpRequest实现的。Fetch提供了一个更好的替代方法,可以很容易地被其他技术使用,例如 Service Workers。Fetch还提供了单个逻辑位置来定义其他HTTP相关概念,例如CORS和HTTP的扩展。
Fetch API提供了一个fetch()方法,它被定义在BOM的window对象中,你可以用它来发起对远程资源的请求。 该方法返回的是一个Promise对象,让你能够对请求的返回结果进行检索。
fetch只支持跨域CORS 不支持JSONP跨越
<script> //fetch发送数据 //支持CORS跨域,没有办法接受jsonp数据 function getData() { //支持 cors跨域url地址'http://api.yytianqi.com/air?city=CH010100&key=2c5br4sgmguremgg' //https://api.douban.com/v2/book/1220562?callback=func return fetch('http://localhost:3001/getdata') .then(function (response) { console.log(response); //promise对象返回 return response.json(); }) } getData().then(function (data) { console.log(data); }) </script>
【相关推荐:javascript视频教程、web前端】
以上就是es6中fetch的用法是什么的详细内容,更多请关注站长家园其它相关文章!
本文标签: ES6
转载请注明来源:es6中fetch的用法是什么
本文永久链接地址:https://www.adminjie.com/post/12025.html
免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!
版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。
更多精彩内容
- VUE中V-IF条件判断改变元素的样式操作
- Discuz如何解决安装时报错run_sql_error
- 低版本VS项目在VS2019无法正常编译的问题
- PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
- Oracle数据库的实例/表空间/用户/表之间关系简单讲解
- RSA2是啥?PHP-RSA2签名验证怎么实现?
- 华为dubal20是什么型号
- ana an00华为是什么型号
- html5的标题标记一共有几个等级
- app是什么应用程序的简称
- html5中onclick是什么意思
- 超链接的作用是什么
- 电脑显示信号线无连接是什么意思
- 小程序大小超限除了分包还能怎么做?如何避免和解决大小限制?
- angular与bootstrap的区别是什么

- 最新文章
-
-
angular学习之聊聊依赖注入
什么是依赖注入?本篇文章带大家了解一下angular中的依赖注入(DI),详细介绍一下AngularDI框架的两个核心概念:注入器Injectors和提供者...
-
什么是JWT?JWT怎么在nodejs中使用?
什么是JWT?本篇文章带大家了解一下JWT,介绍一下JWT在node中的应用,以及JWT的优缺点,希望对大家有所帮助!什么是JWTJWT也就是JSONWeb...
-
vue中什么是Key?设置key与不设置有什么区别?
vue中什么是Key?下面本篇文章给大家介绍一下vue中key的原理,聊聊设置key与不设置key的区别,希望对大家有所帮助!一、Key是什么开始之前,我们先还...
-
实用Word技巧分享:如何快速输入货币、版权符号!
在之前的文章《实用Word技巧分享:轻松输入省略号的几种方法》中,我们了解了轻松输入省略号的3种方法。今天继续实用Word技巧分享,聊聊输入货币、版权符号的最快...
-
linux中make不能用怎么办
在linux中,可以利用yum安装一个make编译器来解决make不能用的问题,yum是基于rpm包管理的命令,能从指定的服务器下载rpm包并且进行安装,语法为...
-
- 热门文章
-
-
VUE中V-IF条件判断改变元素的样式操作
这篇文章主要介绍了VUE中V-IF条件判断改变元素的样式操作,具有很好的参考价值,希望对大家有所帮助。一起跟随想过来看看吧...
-
Discuz如何解决安装时报错run_sql_error
问题环境VMware虚拟机Centos7.3PHP7.0MySQL8.0NGINX1.14Discuz3.4问题还原本地环境为PHP5.6+MySQL5.6在安...
-
低版本VS项目在VS2019无法正常编译的问题
低版本VS项目在VS2019无法正常编译的问题这里指的编译并不准确,只是为了方便说明。后有(未安装),201?...
-
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
实现原理使用redis链表来做,因为pop操作是原子的,即使有很多用户同时到达,也是依次执行,推荐使用。实现步骤第一步,先将商品库存入队列/**.trigge...
-
Oracle数据库的实例/表空间/用户/表之间关系简单讲解
完整的Oracle数据库通常由两部分组成:Oracle数据库和数据库实例。Oracle是一种数据库管理系统,是一种关系型的数据库管理系统。我们用这些高级权限账号...
-