码迷,mamicode.com
首页 > 其他好文 > 详细

【重点突破】—— fetch()方法介绍

时间:2019-04-09 15:13:51      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:class   col   resolve   asi   www.   ast   扩展性   lang   round   

前言:ant-design-pro的技术组成主要是react+redux+dva+antd+fetch+roadhog,dva在源码包index.js里面导出了fetch,但是如果不想使用fetch库,想换成其他库也是可以的(axios后期扩展性更好些),roadhog主要是基于webpack实现的封装。关于fetch发送请求的代码都封装在了utils/request.js文件中。PS:这里重点梳理对fetch()的使用学习,原文地址:大灰狼的小棉羊哥哥博客


 

  • 与XMLHttpRequest(XHR)类似,fetch()方法允许你发出AJAX请求。区别在于Fetch API使用Promise,因此是一种简洁明了的API,比XMLHttpRequest更加简单易用。
  • 从Chrome 40开始,Fetch API可以被利用在Service Worker全局作用范围中,自Chrome 42开始,可以被利用在页面中。
  • 如果你还不了解Promise,需要首先补充这方面知识。

 

基本的Fetch请求

  • 让我们首先来比较一个XMLHttpRequest使用示例与fetch方法的使用示例。该示例向服务器端发出请求,得到响应并使用JSON将其解析。

 

XMLHttpRequest

  • 一个XMLHttpRequest需要设置两个事件回调函数,一个用于获取数据成功时调用,另一个用于获取数据失败时调用,以及一个open()方法调用及一个send()方法调用。
    function reqListener(){
        var data=JSON.parse(this.responseText);
        console.log(data);
    }
    function reqError(err){
        console.log("Fetch错误:"+err);
    }
    var oReq=new XMLHttpRequest();
    oReq.onload=reqListener;
    oReq.onerror=reqError;
    oReq.open("get","/students.json",true);
    oReq.send();  

Fetch

  • 一个fetch()方法的使用代码示例如下所示:
    fetch("/students.json")
    .then(
        function(response){
            if(response.status!==200){
                console.log("存在一个问题,状态码为:"+response.status);
                return;
            }
            //检查响应文本
            response.json().then(function(data){
                console.log(data);
            });
        }
    )
    .catch(function(err){
        console.log("Fetch错误:"+err);
    });  
  1. 在上面这个示例中,我们在使用JSON解析响应前首先检查响应状态码是否为200。
  2. 一个fetch()请求的响应为一个Stream对象,这表示当我们调用json()方法,将返回一个Promise对象,因为流的读取将为一个异步过程。

 

响应元数据

  • 在上一个示例中我们检查了Response对象的状态码,同时展示了如何使用JSON解析响应数据。我们可能想要访问响应头等元数据,代码如下所示:
    fetch("/students.json")
    .then(
        function(response){
            console.log(response.headers.get(‘Content-Type‘));
            console.log(response.headers.get(‘Date‘));
            console.log(response.status);
            console.log(response.statusText);
            console.log(response.type);
            console.log(response.url);
        }
    )
    

      

响应类型

  • 当我们发出一个fetch请求时,响应类型将会为以下几种之一:“basic”、“cors”或“opaque”。这些类型标识资源来源,提示你应该怎样对待响应流。
  • 当请求的资源在相同域中时,响应类型为“basic”,不严格限定你如何处理这些资源。
  • 如果请求的资源在其他域中,将返回一个CORS响应头。响应类型为“cors”。“cors”响应限定了你只能在响应头中看见“Cache-Control”、“Content-Language”、“Content-Type”、“Expires”、“Last-Modified”以及“Progma”。
  • 一个“opaque”响应针对的是访问的资源位于不同域中,但没有返回CORS响应头的场合。如果响应类型为“opaque”,我们将不能查看数据,也不能查看响应状态,也就是说我们不能检查请求成功与否。目前为止不能在页面脚本中请求其他域中的资源。
  • 你可以为fetch请求定义一个模式以确保请求有效。可以定义的模式如下所示:
  1. "same-origin":只在请求同域中资源时成功,其他请求将被拒绝。
  2. "cors":允许请求同域及返回CORS响应头的域中的资源。
  3. "cors-with-forced-preflight":在发出实际请求前执行preflight检查。
  4. "no-cors":针对的是向其他不返回CORS响应头的域中的资源发出的请求(响应类型为“opaque”),但如前所述,目前在页面脚本代码中不起作用。
  • 为了定义模式,在fetch方法的第二个参数中添加选项对象并在该对象中定义模式:
    fetch("http://www.html5online.com.cn/cors-enabled/students.json",{mode:"cors"})
    .then(
        function(response){
            console.log(response.headers.get(‘Content-Type‘));
            console.log(response.headers.get(‘Date‘));
            console.log(response.status);
            console.log(response.statusText);
            console.log(response.type);
            console.log(response.url);
        }
    )
    .catch(function(err){
        console.log("Fetch错误:"+err);
    });
    

      

Promise方法链

  • Promise API的一个重大特性是可以链接方法。对于fetch来说,这允许你共享fetch请求逻辑。
  • 如果使用JSON API,你需要检查状态并且使用JSON对每个响应进行解析。你可以通过在不同的返回Promise对象的函数中定义状态及使用JSON进行解析来简化代码,你将只需要关注于处理数据及错误:
    function status(response){
        if(response.status>=200 && response.status<300){
            return Promise.resolve(response);
        }
        else{
            return Promise.reject(new Error(response.statusText));
        }
    }
    function json(response){
        return response.json();
    }
    fetch("/students.json")
    .then(status)
    .then(json)
    .then(function(data){
        console.log("请求成功,JSON解析后的响应数据为:",data);
    })
    .catch(function(err){
        console.log("Fetch错误:"+err);
    });
    
  1. 在上述代码中,我们定义了status函数,该函数检查响应的状态码并返回Promise.resolve()方法或Promise.reject()方法的返回结果(分别为具有肯定结果的Promise及具有否定结果的Promise)。这是fetch()方法链中的第一个方法。如果返回肯定结果,我们调用json()函数,该函数返回来自于response.json()方法的Promise对象。在此之后我们得到了一个被解析过的JSON对象,如果解析失败Promise将返回否定结果,导致catch段代码被执行。

  2. 这样书写的好处在于你可以共享fetch请求的逻辑,代码容易阅读、维护及测试。

      

POST请求

  • 在Web应用程序中经常需要使用POST方法提交页面中的一些数据。
  • 为了执行POST提交,我们可以将method属性值设置为post,并且在body属性值中设置需要提交的数据。
    fetch(url,{
        method:"post",
        headers:{
            "Content-type":"application:/x-www-form-urlencoded:charset=UTF-8"
        },
        body:"name=lulingniu&age=40"
    })
    .then(status)
    .then(json)
    .then(function(data){
        console.log("请求成功,JSON解析后的响应数据为:",data);
    })
    .catch(function(err){
        console.log("Fetch错误:"+err);
    });
    

      

使用Fetch请求发送凭证

  • 你可能想要使用Fetch发送带有诸如cookie之类的凭证的请求。你可以在选项对象中将credentials属性值设置为“include”:
    fetch(url,{
       credentials:"include"
    })
    

      

附:ant design pro 网络请求封装中的坑

  • pro约定了当状态码200~300为网络请求成功状态,其余均为失败状态。

       技术图片

  • 其次,pro对delete方法以及网络状态为204时自动做了text()方法,在校验delete方法时,要注意json.parse()后进行校验,并且谨慎使用204的网络状态。   

         技术图片

  • 避免网络状态错误后,造成js报错。比如,接口token超时返回401时,这时不会返回response,要避免在直接对resopnse内深层数据的判断。

       技术图片

资料来源:ryzZZ简书         

【重点突破】—— fetch()方法介绍

标签:class   col   resolve   asi   www.   ast   扩展性   lang   round   

原文地址:https://www.cnblogs.com/ljq66/p/10676902.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!