fetch常见的坑

接收到表示错误的HTTP状态码时，fetch()返回的Promise不会被标记为reject（即使状态码为404或500）。fetch()会将Promise状态标记为resolve（但resolve返回值但OK 属性设置为 false）。网络故障或请求被阻止才会标记为reject。
fetch()不会从服务端发送或接收任何cookies。发送cookies 需要设置 fetch(url, {credentials: 'include'}) 选项。

原始XHR请求

var xhr = new XMLHttpRequest(); 
xhr.open('GET', url);
xhr.responseType = 'json';
xhr.onload = function() {
console.log(xhr.response); 
}; 
xhr.onerror = function() { 
console.log("Oops, error"); 
}; 
xhr.send();

fetch请求


fetch(url).then(function(response) {
return response.json();
}).then(function(data) { 
console.log(data); }).catch(function(e) {
console.log("Oops, error");
});

获取一个JSON文件，并打印到控制台。指明资源路径，然后返回一个Response对象，使用json()方法获取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);
});

Fetch|青训营笔记

fetch常见的坑

原始XHR请求

fetch请求

响应元数据

响应类型