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

Posted 2021-02-15 宁静致远

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了重点突破—— fetch()方法介绍相关的知识，希望对你有一定的参考价值。

前言：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);
});

在上面这个示例中，我们在使用JSON解析响应前首先检查响应状态码是否为200。
一个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请求定义一个模式以确保请求有效。可以定义的模式如下所示：

"same-origin"：只在请求同域中资源时成功，其他请求将被拒绝。
"cors"：允许请求同域及返回CORS响应头的域中的资源。
"cors-with-forced-preflight"：在发出实际请求前执行preflight检查。
"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);
});

在上述代码中，我们定义了status函数，该函数检查响应的状态码并返回Promise.resolve()方法或Promise.reject()方法的返回结果（分别为具有肯定结果的Promise及具有否定结果的Promise)。这是fetch()方法链中的第一个方法。如果返回肯定结果，我们调用json()函数，该函数返回来自于response.json()方法的Promise对象。在此之后我们得到了一个被解析过的JSON对象，如果解析失败Promise将返回否定结果，导致catch段代码被执行。
这样书写的好处在于你可以共享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);
});