Fetch API

let promise = fetch(url, {
  method: "GET", // POST, PUT, DELETE, 等等.
  headers: {
    "Content-Type": "text/plain;charset=UTF-8" // 内容类型头的值通常会根据请求主体自动设置
  },
  body: undefined // string, FormData, Blob, BufferSource, 或者 URLSearchParams
  referrer: "about:client", // 无来源页 (no-referrer) 为 ''，或者是一个来自当前域名的 url
  referrerPolicy: "no-referrer-when-downgrade", // no-referrer, origin, same-origin...
  mode: "cors", // same-origin, no-cors
  credentials: "same-origin", // omit, include
  cache: "default", // no-store, reload, no-cache, force-cache, 或者 only-if-cached
  redirect: "follow", // manual, error
  integrity: "", // 一个 hash 值, 比如 "sha256-abcdef1234567890"
  keepalive: false, // true
  signal: undefined, // 终止请求的控制器
  window: window // null
});

fetch('/page', {
  referrer: "" // 没有 Referer 头部信息
});

fetch('/page', {
  // 假设我们在 https://javascript.info
  // 我们可以设置任何 Referer 头部，但只能在当前网页源
  referrer: "https://javascript.info/anotherpage"
});

fetch('https://another.com/page', {
  // ...
  referrerPolicy: "origin-when-cross-origin" // Referer: https://javascript.info
});

## mode

`mode` 选项服务类似安全守卫，用以阻止跨域请求：

- **`"cors"`** -- 默认值，允许跨域请求，可见于 <info:fetch-crossorigin>，
- **`"same-origin"`** -- 禁止跨域请求，
- **`"no-cors"`** -- 只允许简单的跨域请求。

当 `fetch` 的 url 来自于第三方，我们想要一个 "停电开关" 来限制跨域能力时，这也许会很有用。

## credentials

`credentials` 选项确定 `fetch` 是否应该在请求中发送 cookies 和 HTTP-Authorization 头部信息。

- **`"same-origin"`** -- 默认值，在跨域请求中不发送，
- **`"include"`** -- 总是发送，需要在跨域服务器中设置 `Accept-Control-Allow-Credentials` 来使 JavaScript 能够接受响应，这部分在这一章节<info:fetch-crossorigin> 有所讨论，
- **`"omit"`** -- 不发送，即使在同源请求。

## cache

`fetch` 请求会默认地利用标准的 HTTP 缓存。就是说，它遵从 `Expires`,， `Cache-Control` 头部信息，发送 `If-Modified-Since`，和其他头部信息。就像常规的 HTTP 请求。

`cache` 选项允许无视 HTTP 缓存或者微调它的用法：

- **`"default"`** -- `fetch` 使用标准的 HTTP 缓存规则和头部信息，
- **`"no-store"`** -- 完全无视 HTTP 缓存，如果我们设置了头部信息 `If-Modified-Since`, `If-None-Match`, `If-Unmodified-Since`, `If-Match`, 或者 `If-Range`，这个模式会成为默认值，
- **`"reload"`** -- 不从 HTTP 缓存获取结果(如果有)，但使用响应填充缓存(如果响应头允许)，
- **`"no-cache"`** -- 如果有一个已缓存的响应则创建一个有条件的请求，否则创建一个常规的请求。使用响应填充 HTTP 缓存，
- **`"force-cache"`** -- 从 HTTP 缓存使用一个响应，即使该缓存已过时。如果在 HTTP 缓存中无响应，则创建一个常规的 HTTP 请求，
- **`"only-if-cached"`** -- 从 HTTP 缓存使用一个响应，即使该缓存已过时。如果在 HTTP 缓存中无响应，则报错。只有当 `mode` 为 `same-origin` 时生效。

## redirect

通常来说, `fetch` 直接随着 HTTP 重定向，比如 301，302等等。

`redirect` 选项允许改变这个情况:

- **`"follow"`** -- 默认值, 随着 HTTP 重定向,
- **`"error"`** -- 如果 HTTP 重定向则报错,
- **`"manual"`** -- 不随着 HTTP 重定向，但 `response.url` 会是一个新的 URL，然后 `response redirectd` 会变为 `true`，所以我们能够手动表现重定向到新的 URL (如果需要的话)。

## integrity

`integrity` 选项允许检查响应是否符合已知的校验和。

正如在[规范](https://w3c.github.io/webappsec-subresource-integrity/)描述的，支持的哈希函数 (hash-functions) SHA-256，SHA-384， 和 SHA-512，也许还有其他，这取决于浏览器。

比如，我们下载一个文件，并且我们知道它的 SHA-256 校验和是 "abcdef" (当然，一个真的校验和更长)。

我们可以把它放在 `integrity` 选项中，就像这样:

```js
fetch('http://site.com/file', {
  integrity: 'sha256-abcdef'
});
```

然后 `fetch` 会自己计算 SHA-256 并且比较我们的字符串。假如匹配错误，则会报错。

## keepalive

`keepalive` 选项表示请求是否会使初始化后的网页“失活”。

比如，我们收集当前用户是如何使用我们的网页的(点击鼠标，看过的页面碎片)数据，来分析并提升用户体验。

当用户离开我们的网页时 -- 我们希望能够在服务器中储存数据。

为此，我们可以使用事件 `window.onunload`:

```js run
window.onunload = function() {
  fetch('/analytics', {
    method: 'POST',
    body: "statistics",
    keepalive: true
  });
};
```

正常来说，当一个文档卸载时，所有相关联的网络请求都会被取消。但是 `keepalive` 选项告诉浏览器在后台执行请求，即使它离开了页面。所以这个选项对于我们的请求成功是至关重要的。

它有一些限制：
- 我们无法发送太大的数据：`keepalive` 请求的容量限制为 64kb。
    - 如果收集了太多数据，我们可以将其分包，按规律发送出去，所以不会留下太多数据在最后 `onunload` 请求。
    - 限制是对当前进行中的所有请求的。所以我们无法通过创建 100 个请求，每个 64kb 这样作弊。
- 如果请求是来自 `onunload`，我们无法处理服务器响应，因为文档在那个时候已经卸载，函数无法工作。
    - 通常来说，服务器给每个请求发送空响应，所以这不是问题。