使用 Fetch

  • 它还提供了一个全局 fetch()方法
  • 这种功能以前是使用 XMLHttpRequest实现的。Fetch提供了一个更好的替代方法，可以很容易地被其他技术使用，例如 Service Workers。
  • Fetch还提供了单个逻辑位置来定义其他HTTP相关概念，例如CORS和HTTP的扩展。？
  • 两种方式的不同
    • 当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject， 即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
    • 默认情况下，fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置 credentials 选项）。

进行 fetch 请求

  • 响应是一个 Response 对象。为了获取JSON的内容，我们需要使用 json()方法（在Bodymixin 中定义，被 Request 和 Response 对象实现）。
fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json(); // response.json()返回promise
  })
  .then(function(myJson) {
    console.log(myJson);
  });
  • 最好使用符合内容安全策略 (CSP)的链接而不是使用直接指向资源地址的方式来进行Fetch的请求。？

支持的请求参数

  • fetch() 接受第二个可选参数，一个可以控制不同配置的 init 对象：
// Example POST method implementation:

postData('http://example.com/answer', {answer: 42})
  .then(data => console.log(data)) // JSON from `response.json()` call
  .catch(error => console.error(error))

function postData(url, data) {
  // Default options are marked with *
  return fetch(url, {
    body: JSON.stringify(data), // must match 'Content-Type' header
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, same-origin, *omit
    headers: {
      'user-agent': 'Mozilla/4.0 MDN Example',
      'content-type': 'application/json'
    },
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, cors, *same-origin
    redirect: 'follow', // manual, *follow, error
    referrer: 'no-referrer', // *client, no-referrer
  })
  .then(response => response.json()) // parses response to JSON
}

发送带凭据的请求

  • 让浏览器发送包含凭据的请求（即使是跨域源），要将credentials: 'include'添加到传递给 fetch()方法的init对象。
fetch('https://example.com', {
  credentials: 'include'  
})
  • 请求URL与调用脚本位于同一起源处时发送凭据，请添加credentials: 'same-origin'。
// The calling script is on the origin 'https://example.com'（调用脚本来源于https://example.com）

fetch('https://example.com', {
  credentials: 'same-origin'  
})
  • 确保浏览器不在请求中包含凭据，请使用credentials: 'omit'。
fetch('https://example.com', {
  credentials: 'omit'  
})

上传 JSON 数据

  • 使用 fetch() POST 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));

上传文件

  • 可以通过HTML元素，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));

检测请求是否成功

  • 如果遇到网络故障，fetch() promise 将会 reject，带上一个 TypeError 对象。
  • 想要精确的判断 fetch() 是否成功，需要包含 promise resolved 的情况，此时再判断 Response.ok 是不是为 true。
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);
});

自定义请求对象

  • 可以通过使用 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.blob();
}).then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;
});
  • Request() 和 fetch() 接受同样的参数。你甚至可以传入一个已存在的 request 对象来创造一个拷贝：
  • 因为 request 和 response bodies 只能被使用一次（译者注：这里的意思是因为设计成了 stream （流）的方式，所以它们只能被读取一次）。创建一个拷贝就可以再次使用 request/response 了，当然也可以使用不同的 init 参数。？
  • clone() 方法也可以用于创建一个拷贝。它在语义上有一点不同于其他拷贝的方法。其他方法（比如拷贝一个 response）中，如果 request 的 body 已经被读取过，那么将执行失败，然而 clone() 则不会失败。？
var anotherRequest = new Request(myRequest,myInit);

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",
});
  • 它的内容可以被获取：（增、删、查、改）
  • 一些操作只能在 ServiceWorkers 中使用？
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")); // [ ]
  • 如果使用了一个不合法的HTTP Header属性名，那么Headers的方法通常都抛出 TypeError 异常。
  • 如果不小心写入了一个不可写的属性，也会抛出一个 TypeError 异常。
  • 除此以外的情况，失败了并不抛出异常。
var myResponse = Response.error();
try {
  myResponse.headers.set("Origin", "http://mybank.com");
} catch(e) {
  console.log("Cannot pretend to be a bank!");
}
  • 最佳实践是在使用之前检查 content type 是否正确（可以帮助前端或测试快速定位错误）
fetch(myRequest).then(function(response) {
  if(response.headers.get("content-type") === "application/json") {
    return response.json().then(function(json) {
      // process your JSON further
    });
  } else {
    console.log("Oops, we haven't got JSON!");
  }
});

Guard

  • Headers 对象有一个特殊的 guard 属性。这个属性没有暴露给 Web，但是它影响到哪些内容可以在 Headers 对象中被操作。（在 ServiceWorkers 中使用？）
  • 可能值如下 ？
    • none：默认的
    • request：从 request 中获得的 headers（Request.headers）只读（不可以修改或添加请求头，所有的？）
    • request-no-cors：从不同域（Request.mode no-cors）的 request 中获得的 headers 只读
    • response：从 response 中获得的 headers（Response.headers）只读
    • immutable：在 ServiceWorkers 中最常用的，所有的 headers 都只读。（ServiceWorkers 是不能给合成的 Response 的 headers 添加一些 cookies）

Response 对象

  • Response 实例是在 fetch() 处理完promises之后返回的
  • 最常见的response属性有:
    • Response.status — 整数(默认值为200) 为response的状态码.
    • Response.statusText — 字符串(默认值为"OK"),该值与HTTP状态码消息对应.
    • Response.ok — 如上所示, 该属性是来检查response的状态是否在200-299(包括200,299)这个范围内.该属性返回一个Boolean值.
  • 它的实例也可用通过 JavaScript 来创建, 但只有在ServiceWorkers中才真正有用,当使用respondWith()方法并提供了一个自定义的response来接受request时:
  • Response() 构造方法接受两个可选参数—response的数据体和一个初始化对象(与Request()所接受的init参数类似.)
// ServiceWorkers 中
var myBody = new Blob();

addEventListener('fetch', function(event) {
  event.respondWith(new Response(myBody, {
    headers: { "Content-Type" : "text/plain" }
  });
});
  • 静态方法error()只是返回了一个错误的response.Service Workers才有。
  • redirect() 返回了一个可以重定向至某URL的response.Service Workers才有。

Body

  • 不管是请求还是响应都能够包含body对象. body也可以是以下任意类型的实例.
    • ArrayBuffer 二进制数据缓冲区
    • ArrayBufferView (Uint8Array等) // ArrayBufferView 没有特定的实体，是指一类二进制数据对象，叫类数组数据
    • Blob/File
    • string
    • URLSearchParams（URL搜索参数）
    • FormData
  • Body 类定义了以下方法 (这些方法都被 Request 和Response所实现)以获取body内容
  • 这些方法都会返回一个被解析后的Promise对象和数据.
    • arrayBuffer()
    • blob()
    • json()
    • text()
    • formData()
  • 请求体可以由传入body参数来进行设置:
var form = new FormData(document.getElementById('login-form'));
fetch("/login", {
  method: "POST",
  body: form
})
  • request和response（包括fetch() 方法）都会试着自动设置Content-Type。如果没有设置Content-Type值，发送的请求也会自动设值。

特性检测

  • Fetch API 的支持情况，可以通过检测Headers, Request, Response 或 fetch()是否在Window 或 Worker 域中（对象是否包含这个属性或方法）
if(self.fetch) {
    // run my fetch request here
} else {
    // do something with XMLHttpRequest?
}

Polyfill

  • 要在不支持的浏览器中使用Fetch，可以使用Fetch Polyfill。
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/qq3279338858/p/11057329.html