站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

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(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • angular学习之聊聊依赖注入

      angular学习之聊聊依赖注入

      什么是依赖注入?本篇文章带大家了解一下angular中的依赖注入(DI),详细介绍一下AngularDI框架的两个核心概念:注入器Injectors和提供者...

    • 什么是JWT?JWT怎么在nodejs中使用?

      什么是JWT?JWT怎么在nodejs中使用?

      什么是JWT?本篇文章带大家了解一下JWT,介绍一下JWT在node中的应用,以及JWT的优缺点,希望对大家有所帮助!什么是JWTJWT也就是JSONWeb...

    • vue中什么是Key?设置key与不设置有什么区别?

      vue中什么是Key?设置key与不设置有什么区别?

      vue中什么是Key?下面本篇文章给大家介绍一下vue中key的原理,聊聊设置key与不设置key的区别,希望对大家有所帮助!一、Key是什么开始之前,我们先还...

    • 实用Word技巧分享:如何快速输入货币、版权符号!

      实用Word技巧分享:如何快速输入货币、版权符号!

      在之前的文章《实用Word技巧分享:轻松输入省略号的几种方法》中,我们了解了轻松输入省略号的3种方法。今天继续实用Word技巧分享,聊聊输入货币、版权符号的最快...

    • linux中make不能用怎么办

      linux中make不能用怎么办

      在linux中,可以利用yum安装一个make编译器来解决make不能用的问题,yum是基于rpm包管理的命令,能从指定的服务器下载rpm包并且进行安装,语法为...

    热门文章