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状况改成已运用。