Fetch学习笔记。

Fetch API提供了一个获取资源的接口（包括跨域）。任何使用过XMLHttpRequest的人都能轻松上手，但新的API提供了更强大和灵活的功能集。
Fetch提供了对Request和Response对象的通用定义。使之今后可以被使用到更多地应用场景中：无论是service workers、Cache API、又或则是其它处理请求和响应的方式，甚至是任何一种需要你自己在程序中生成响应的方式。
它还提供了一种定义，将CORS和HTTP原生的头信息结合起来，取代了原来那种分离的定义。
发送请求或则获取资源，需要使用WindowOrWorkerGlobalScope.fetch方法。它在很多接口中都被实现了，比如Window和WorkerGlobalScope。所以在各种环境中都可以用这个方法获取到资源。
fetch()必须接受一个参数--资源的路径。无论请求成功与否，它都返回一个Promise对象，resolve对应请求的Response。你也可以传一个可选的第二个参数init（参见Request）。
一旦Response被返回，就有一些方法可以使用了，比如定义内容或者处理方法(参见Body)。
你也可以通过Request()和Response()的构造函数直接创建请求和响应，但是我们不建议这么做。它们应该被用于创建其它API的结果。

*当接收到一个代表错误的HTTP状态码时，从fetch()返回的Promise不会被标记为reject，即使该HTTP响应的状态码是404或500.相反，它会将Promise状态标记为resolve(但是会将resolve的返回值的ok属性设置为false)，仅当网络故障时或请求被阻止时，才会标记为reject。
*默认情况下，fetch不会从服务器端发送或接收任何cookie，如果站点依赖于用户session，则会导致未经认证的请求(要发送cookies，必须设置credentials).

进行fetch请求。
一个基本的fetch请求设置起来很简单。看看下面的代码：

fetch('https://azu.github.io/promises-book/json/comment.json').then(function(response){
    return response.json()
}).then(function(myJson){
    console.log(myJson)
})

这里我们通过网络获取一个JSON文件并将其打印到控制台。最简单的用法是只提供一个参数用来指明想fetch()到的资源路径，然后返回一个包含响应结果的promise（一个Response对象）。
当然它只是一个HTTP响应，而不是真的JSON。为了获取JSON的内容，我们需要使用json()方法。
fetch()接收第二个可选参数，一个可以控制不同配置的init对象：
参考fetch()，查看所有可选的配置和更多描述。

postData('',{answer:42}).then(
    data=>console.log(data)
).catch(
    error = >console.error(error)
)
function postData(url,data){
    return fetch(url,{
        body:JSON.stringify(data),
        cache:'no-cache',
        credentials:'same-origin',
        headers:{
            'user-agent':'Mozilla/4.0 MDN Example',
            'content-type':'application/json'
        },
        method:'POST',
        mode:'cors',
        redirect:'follow',
        referrer:'no-referrer',
    }).then(
        response=>response.json()
    )
}

发送带凭据的请求

为了让浏览器发送包含凭据的请求(即使是跨域源)，要将credentials:'include'添加到传递给fetch()方法的init对象。

fetch('url',{
    credentials:'include'
})

如果你只想在请求URL与调用脚本位于同一起源处时发送凭据，请添加credentials：'same-origin'.

fetch('url',{
    credentials:'same-origin'
})

要确保浏览器不在请求中包含凭据，请使用credentials:'omit'。

fetch('url',{
    credentials:'omit'
})

上传JSON数据

var url = '';
var data = {username:'example'};
fetch(url,{
    method:'POST',
    body:JSON.stringify(data),
    headers:new Headers({
        'COntent-Type':'application/json'
    })
}).then(res=>res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response))

上传文件

var formData = new FormData();
var fileFiled = document.querySelector('input[type='file']');
formData.append('username','abc123');
formData.append('avatar',fileFiled.files[0]);
fetch('url',{
    method:'PUT',
    body:formData
})
.then(response => response.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response))

检测请求是否成功

如果遇到网络故障，fetch()promise将会reject，带上一个TypeError对象。虽然这个情况经常是遇到了权限问题或类似问题--比如404不是一个网络故障。想要精确判断fetch()是否成功，需要包含promise resolved的情况，此时再判断Response.ok是不是为true。类似以下代码：

fetch('flowers.jpg').then(function(response){
    if(reponse.ok){
        return response.blod();
    }
    throw new Error('Network response was not ok');
}).then(function(myBlod){
    var objectURL = URL.createObjectURL(myBlod);
    myImage.src = objectURL;
}).catch(function(error){
    console.log('There has been a problem with your fetch operation:',error.message)
})

自定义请求对象

除了传给fetch()一个资源的地址，你还可以通过使用Request()构造函数来创建一个request对象，然后再作为参数传给fetch():

var myHeaders = new Headers();
var myInit ={
    method:'GET',
    headers:myHeaders,
    mode:'cors',
    cache:'default'
};
var myRequest = new Request('flowers.jpg',myInit);
fetch(myRequest).then(function(response){
    return response.blod();
}).then(function(myBlod){
    var objectURL = URL.createObjectURL(myBlod);
    myImage.src = objectURL;
})

Headers

Fetch API的headers接口允许你的HTTP请求和响应头执行各种操作。这些操作包括检索，设置，添加和删除。一个Headers对象具有关联的头列表，它最初为空，由零个或多个键值对组成。你可以使用append()方法添加之类的方法添加到此。在该接口的所有方法中，标题名称由不区分大小写的字节序列匹配。
方法：

Headers.append()//给现有的header添加一个值，或者添加一个未存在的header并赋值。
Headers.delete()//从Headers对象中删除指定的header。
Headers.entries()//以迭代器的形式返回Headers对象中的所有键值对。
Headers.get()//从Headers对象中返回指定的header的第一个值。
Headers.has()//以布尔值的形式从Headers对象中返回是否存在指定的header。
Headers.keys()//以迭代器的形式返回Headers对象中所有存在的header名。
Headers.set()//替换现有的Header的值，或则添加一个未存在的header并赋值。
Headers.values()//以迭代器的形式返回headers对象中所有存在的header的值。

使用Headers的接口，你可以通过Headers()构造函数来创建一个你自己的headers对象。一个headers对象是一个简单的多名值对：

var content = 'Hello World';
var myHeaders = new Headers();
myHeaders.append('Content-Type','text/plain');
myHeaders.append("Content-Length", content.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");

也可以传一个多维数组或者对象字面量：

myHeaders = new Headers({
  "Content-Type": "text/plain",
  "Content-Length": content.length.toString(),
  "X-Custom-Header": "ProcessThisImmediately",
});

它的内容可以被获取：

console.log(myHeaders.has("Content-Type")); // true
console.log(myHeaders.has("Set-Cookie")); // false
myHeaders.set("Content-Type", "text/html");
myHeaders.append("X-Custom-Header", "AnotherValue");
 
console.log(myHeaders.get("Content-Length")); // 11
console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
 
myHeaders.delete("X-Custom-Header");
console.log(myHeaders.getAll("X-Custom-Header")); // [ ]

Body

Fetch API中的body代表响应/请求的正文，允许你声明其内容类型是什么以及应该如何处理。
正文由Request和Response实现。
方法：

Body.arrayBuffer()//使用一个buffer数组来读取Response流中的数据，并将bodyUsed状态改为已使用。
Body.blod()//使用一个Blod对象来读取Response流中的数据，并将bodyUsed状态改为已使用。
Body.formData()//使用一个FormData对象来读取Response流中的数据，并将bodyUsed状态改为已使用。
Body.json()//使用一个JSON对象来读取Response流中的数据，并将bodyUsed状态改为已使用。
Body.text()//使用一个USVString对象来读取Response流中的数据，并将bodyUsed状态改为已使用。