一、fetch() 是什么？

fetch() 是 浏览器内置的 全局 JavaScript 办法，用于收回 http 申请，无需下载安装，能够间接应用。

// 一个简略 http 申请fetch('http://example.com/movies.json')    .then(function (response) {        return response.json();    })    .then(function (myJson) {        console.log(myJson);    });
二、怎么应用？
1、简略应用实例

fetch() 的第二个参数是 init 对象，用于设置 http 的配置信息。

postData('http://example.com/answer', { 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())}
2、配置具体阐明
  • method ：申请应用的办法，如 GET、POST、PUT、DELETE 等。
  • headers ：申请的头信息。
  • body ：申请的 body 信息，留神 GET 或 HEAD 办法的申请不能蕴含 body 信息。
  • mode ：申请模式，可用值： cors、no-cors、same-origin
  • credentials ：是否发送 cookie 给服务器：omit(任何状况都不发)、same-origin(同源才发)、include(任何状况都发)
  • cache ：可用 cache 模式 ：default、no-store、reload、no-cache、force-cache、only-if-cached 。

  • redirect ：重定向，Chrome中默认应用 follow ；

    • follow (主动重定向)
    • error (产生重定向将主动终止并且抛出谬误)
    • manual (手动解决重定向)
  • referrer ：发送申请的页面URL，浏览器默认增加到申请Header 中。设置成 no-referrer 示意不增加。
  • referrerPolicy ：什么时候应用 referrer，可用值： no-referrer、 no-referrer-when-downgrade、origin、origin-when-cross-origin、unsafe-url 。
  • integrity ：设定资源对应 hash 值，保障资源的完整性。
三、应用场景
1、发送带凭证申请
// 同不同源都会发送 带凭证的申请fetch('https://example.com', {  credentials: 'include'})// 只有同源才发送 带凭证申请fetch('https://example.com', {  credentials: 'same-origin'})// 同不同源都发送 不带凭证的申请fetch('https://example.com', {  credentials: 'omit'})
2、上传 JSON 数据
var url = 'https://example.com/profile';var data = {username: 'example'};fetch(url, {  method: 'POST', // or 'PUT'  body: JSON.stringify(data), // data can be `string` or {object}!  headers: new Headers({    'Content-Type': 'application/json'  })}).then(res => res.json()).catch(error => console.error('Error:', error)).then(response => console.log('Success:', response));
3、上传文件

能够通过 HTML <input type="file" /> 元素，FormData对象 和 fetch() 办法 上传文件。

var formData = new FormData();var fileField = document.querySelector("input[type='file']");formData.append('username', 'abc123');formData.append('avatar', fileField.files[0]);fetch('https://example.com/profile/avatar', {  method: 'PUT',  body: formData}).then(response => response.json()).catch(error => console.error('Error:', error)).then(response => console.log('Success:', response));
4、上传多个文件

能够通过HTML <input type="file" mutiple/> 元素，FormData() 和 fetch() 上传文件。

var formData = new FormData();var photos = document.querySelector("input[type='file'][multiple]");formData.append('title', 'My Vegas Vacation');// formData 只承受文件、Blob 或字符串，不能间接传递数组，所以必须循环嵌入for (let i = 0; i < photos.files.length; i++) {    formData.append('photo', photos.files[i]);}fetch('https://example.com/posts', {  method: 'POST',  body: formData}).then(response => response.json()).then(response => console.log('Success:', JSON.stringify(response))).catch(error => console.error('Error:', error));
5、检测申请是否胜利

可用上面办法捕捉 网络故障、服务器端CORS限度 的谬误，做进一步的解决（譬如，写日志等）。

fetch('flowers.jpg').then(function (response) {    if (response.ok) {        return response.blob();    }    throw new Error('Network response was not ok.');}).then(function (myBlob) {    var objectURL = URL.createObjectURL(myBlob);    myImage.src = objectURL;}).catch(function (error) {    console.log('There has been a problem with your fetch operation: ', error.message);});
6、新建Request，发送 http 申请
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.blob();}).then(function (myBlob) {    var objectURL = URL.createObjectURL(myBlob);    myImage.src = objectURL;});
四、Headers
1、创立 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",});
2、Headers对象的办法

Headers 对象提供的读取、设置、判断等办法。

console.log(myHeaders.has("Content-Type")); // trueconsole.log(myHeaders.has("Set-Cookie")); // falsemyHeaders.set("Content-Type", "text/html");myHeaders.append("X-Custom-Header", "AnotherValue");console.log(myHeaders.get("Content-Length")); // 11console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]myHeaders.delete("X-Custom-Header");console.log(myHeaders.getAll("X-Custom-Header")); // [ ]
3、属性报错

设置 Headers 中不反对的属性会报错。

var myResponse = Response.error();try {    myResponse.headers.set("Origin", "http://mybank.com");} catch (e) {    console.log("Cannot pretend to be a bank!");}
4、数据格式确认

获取到数据后，先做数据格式查看，合乎料想格局后再做进一步解决。

fetch(myRequest).then(function (response) {    if (response.headers.get("content-type") === "application/json") {        return response.json().then(function (json) {            // 做进一步数据处理        });    } else {        console.log("Oops, we haven't got JSON!");    }});
5、guard 属性

Headers 对象可用在 申请发送 和 响应承受 中，其有个 guard 属性，用于示意那些参数是只读。

  • none：默认的
  • request：从 request 中取得的 headers（Request.headers）只读
  • request-no-cors：从不同域（Request.mode no-cors）的 request 中取得的 headers 只读
  • response：从 response 中取得的 headers（Response.headers）只读
  • immutable：在 ServiceWorkers 中最罕用的，所有的 headers 都只读。
6、Content-Type

request和response（包含 fetch() 办法）都会试着主动设置 Content-Type。如果没有设置 Content-Type 值，发送的申请也会主动设值。

五、Response 对象

fetch 发出请求后，返回的是 Response 对象，其罕用属性有：

  • Response.status ：整数（默认值为200）为response的状态码。
  • Response.statusText ：字符串（默认值为"OK"），该值与 HTTP 状态码音讯对应。
  • Response.ok ：该属性是来查看response的状态是否在 200 - 299（包含200 和 299）这个范畴内。该属性返回一个布尔值。
六、body 对象

申请和响应 中都能够有 body 对象，Request 和 Response 对象 都实现了以下办法，用于获取 body 不同格局的内容：arrayBuffer()、blob()、json()、text()、formData()

七、查看 fetch 是否可用？
if(self.fetch) {    // run my fetch request here} else {    // do something with XMLHttpRequest?}
八、其余
1、fetch 与 jQuery.ajax() 的不同点
  • fetch() 收到代表谬误的 HTTP 状态码（譬如404 或500），会设置 Promise 的 resolve 值为false，但不会reject，只有 网络故障 或 申请被阻止 才会 reject。
  • fetch() 能够承受跨域 cookies 和 建设跨域会话。
  • fetch() 只有应用了credentials 选项，才会发送 cookies，但要合乎同源( same-origin)规定。
2、fetch 与 axios 的区别

详情，看这里！

3、CORS(跨域拜访)谬误
/* Error:  Access to fetch at '×××'  from origin '×××' has been blocked by CORS policy: No  'Access-Control-Allow-Origin' header is present on the requested  resource. If an opaque response serves your needs, set the request's  mode to 'no-cors' to fetch the resource with CORS disabled.*/

相干跨域拜访的问题，看这里！

九、参考文档
  • 学习fetch，从这里开始！