Fetch API

前几天阿里面试被问到新一代ajax如何跨域 想了想面试官应该问的就是fetch吧 现在来总结一下再次帮助自己理解哈~

Fetch API 提供了一个获取资源的接口（包括跨域）。Fetch 提供了对 Request 和 Response （以及其他与网络请求有关的）对象的通用定义。使之今后可以被使用到更多地应用场景中：无论是service workers、Cache API、又或者是其他处理请求和响应的方式，甚至是任何一种需要你自己在程序中生成响应的方式。它还提供了一种定义，将 CORS 和 HTTP 原生的头信息结合起来，取代了原来那种分离的定义。

fetch()必须接受一个参数——资源的路径。无论请求成功与否，它都返回一个 promise 对象，resolve 对应请求的Response。一旦 Response 被返回，就有一些方法可以使用了，比如定义内容或者处理方法。

此外，Fetch也可以被终止，有相应的Abort API，但是还处于实验中。

Fetch提供了4个接口，分别为fetch()  headers request  response.

最基本的fetch请求如下所示：

fetch('http://example.com/movies.json').then(function(response{

    return response.json();

}).then(function(myJson){

    console.log(JSON.stringify(myJson));

});

fetch()请求的第一个参数为一个URL，第二个参数可选。第二个参数为一个配置对象，可配置项有：

method:"POST",// *GET, POST, PUT, DELETE, etc.

mode:"cors",// no-cors, cors, *same-origin

cache:"no-cache",// *default, no-cache, reload, force-cache, only-if-cached

credentials:"same-origin",// include, same-origin, *omit

headers:{

    "Content-Type":"application/json; charset=utf-8",

    // "Content-Type": "application/x-www-form-urlencoded",

    },

redirect:"follow",      // manual, *follow, error

referrer:"no-referrer",    // no-referrer, *client

body:JSON.stringify(data),    // body的数据类型必须和 "Content-Type" header里声明的一样

}

使用fetch()去发一个包含json数据的post请求：

let url = 'https://example.com/profile';

let data = {username:'example'};

fetch(url,{

    method:'POST',        // 或者'PUT'

    body:JSON.stringify(data),    // data 可以是string或者object类型

    headers:{

        'ContentType':'application/json'

    }    

}).then(res => res.json())

.then(response => console.log('Success:',JSON.stringify(response)))

.catch(error => console.error('Error:',error));

在发出get/post请求时,我的理解为要么可以在第二个参数直接传入一对象{//要传的数据}，要么就在第二个参数中配置headers的ContentType 再在body里传入数据。

在不支持fetch的浏览器中要想使用fetch，Fetch  Polyfill可供使用，引入Polyfill即可。

以上为简单的fetch请求总结。