javascript基础从小白到高手系列六百四十五：Fetch API

Fetch API 能够执行XMLHttpRequest 对象的所有任务，但更容易使用，接口也更现代化，能够在
Web 工作线程等现代Web 工具中使用。XMLHttpRequest 可以选择异步，而Fetch API 则必须是异步。
Fetch API 是WHATWG 的一个“活标准”（living standard），用规范原文说，就是“Fetch 标准定义请求、
响应，以及绑定二者的流程：获取（fetch）”。
Fetch API 本身是使用JavaScript 请求资源的优秀工具，同时这个API 也能够应用在服务线程
（service worker）中，提供拦截、重定向和修改通过fetch()生成的请求接口。
基本用法
fetch()方法是暴露在全局作用域中的，包括主页面执行线程、模块和工作线程。调用这个方法，
浏览器就会向给定URL 发送请求。

1. 分派请求
   fetch()只有一个必需的参数input。多数情况下，这个参数是要获取资源的URL。这个方法返回
   一个期约：
   let r = fetch(‘/bar’);
   console.log®; // Promise
   URL 的格式（相对路径、绝对路径等）的解释与XHR 对象一样。
   请求完成、资源可用时，期约会解决为一个Response 对象。这个对象是API 的封装，可以通过它
   取得相应资源。获取资源要使用这个对象的属性和方法，掌握响应的情况并将负载转换为有用的形式，
   如下所示：
   fetch(‘bar.txt’)
   .then((response) => {
   console.log(response);
   });
   // Response { type: “basic”, url: … }
   读取响应
   读取响应内容的最简单方式是取得纯文本格式的内容，这要用到text()方法。这个方法返回一个
   期约，会解决为取得资源的完整内容：
   fetch(‘bar.txt’)
   .then((response) => {
   response.text().then((data) => {
   console.log(data);
   });
   });
   // bar.txt 的内容
   内容的结构通常是打平的：
   fetch(‘bar.txt’)
   .then((response) => response.text())
   .then((data) => console.log(data));
   // bar.txt 的内容
   处理状态码和请求失败
   Fetch API 支持通过Response 的status（状态码）和statusText（状态文本）属性检查响应状
   态。成功获取响应的请求通常会产生值为200 的状态码，如下所示：
   fetch(‘/bar’)
   .then((response) => {
   console.log(response.status); // 200
   console.log(response.statusText); // OK
   });
   请求不存在的资源通常会产生值为404 的状态码：
   fetch(‘/does-not-exist’)
   .then((response) => {
   console.log(response.status); // 404
   console.log(response.statusText); // Not Found
   });
   请求的URL 如果抛出服务器错误会产生值为500 的状态码：
   fetch(‘/throw-server-error’)
   .then((response) => {
   console.log(response.status); // 500
   console.log(response.statusText); // Internal Server Error
   });
   可以显式地设置fetch()在遇到重定向时的行为（本章后面会介绍），不过默认行为是跟随重定向
   并返回状态码不是300~399 的响应。跟随重定向时，响应对象的redirected 属性会被设置为true，
   而状态码仍然是200：
   fetch(‘/permanent-redirect’)
   .then((response) => {
   // 默认行为是跟随重定向直到最终URL
   // 这个例子会出现至少两轮网络请求
   // /permanent-redirect ->
   console.log(response.status); // 200
   console.log(response.statusText); // OK
   console.log(response.redirected); // true
   });
   在前面这几个例子中，虽然请求可能失败（如状态码为500），但都只执行了期约的解决处理函数。
   事实上，只要服务器返回了响应，fetch()期约都会解决。这个行为是合理的：系统级网络协议已经成
   功完成消息的一次往返传输。至于真正的“成功”请求，则需要在处理响应时再定义。
   通常状态码为200 时就会被认为成功了，其他情况可以被认为未成功。为区分这两种情况，可以在
   状态码非200~299 时检查Response 对象的ok 属性：
   fetch(‘/bar’)
   .then((response) => {
   console.log(response.status); // 200
   console.log(response.ok); // true
   });
   fetch(‘/does-not-exist’)
   .then((response) => {
   console.log(response.status); // 404
   console.log(response.ok); // false
   });
   因为服务器没有响应而导致浏览器超时，这样真正的fetch()失败会导致期约被拒绝：
   fetch(‘/hangs-forever’)
   .then((response) => {
   console.log(response);
   }, (err) => {
   console.log(err);
   });
   //（浏览器超时后）
   // TypeError: “NetworkError when attempting to fetch resource.”
   违反CORS、无网络连接、HTTPS 错配及其他浏览器/网络策略问题都会导致期约被拒绝。
   可以通过url 属性检查通过fetch()发送请求时使用的完整URL：
   // foo.com/bar/baz 发送的请求
   console.log(window.location.href); // https://foo.com/bar/baz
   fetch(‘qux’).then((response) => console.log(response.url));
   // https://foo.com/bar/qux
   fetch(‘/qux’).then((response) => console.log(response.url));
   // https://foo.com/qux
   fetch(‘//qux.com’).then((response) => console.log(response.url));
   // https://qux.com
   fetch(‘https://qux.com’).then((response) => console.log(response.url));
   // https://qux.com