Fetch学习

简介：
Fetch API提供了一个获取资源的接口，使用过XMLHttpRequest的人会很熟悉它，但是Fetch API提供了一个更强大和更灵活的功能集。

什么是Fetch：
1，Fetch 提供了 Request 和 Response对象（以及与网络请求有关的其他内容）的一般定义。
2，Fetch API 提供了 fetch() 方法，它被定义在 BOM 的 window 对象中，你可以用它来发起对远程资源的请求。
3，fetch() 方法返回的是一个Promise对象，让你能够对请求的返回结果进行检索。
4，fetch()是 XMLHttpRequest 的升级版，用于在 JavaScript 脚本里面发出 HTTP 请求。
5，几乎所有环境中都可以用这个方法获取资源

一，基本用法

在用法上，fetch()接受一个 URL 字符串作为参数，默认向该网址发出 GET 请求，返回一个 Promise 对象。它的基本用法如下。

fetch(url)
  .then(...)
  .catch(...)

fetch(url)
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(err => console.log('Request Failed', err))

fetch()接收到的response是一个 Stream 对象，response.json()是一个异步操作，取出所有内容，并将其转为 JSON 对象。

Promise 可以使用 await 语法改写

async function getJSON() {
  const url = 'xxx'
  try {
    const response = await fetch(url)
    return await response.json()
  } catch (error) {
    console.log('Request Failed', error)
  }
}

二，Response 处理

fetch()请求成功以后，得到的是一个 Response 对象。它对应服务器的 HTTP 回应。

async function getJSON() {
  const url = 'xxx';
  try {
    const response = await fetch(url)
    console.log(response.status)
    console.log(response.statusText)
    return await response.json()
  } catch (error) {
    console.log('Request Failed', error)
  }
}

response.status和response.statusText就是 Response 的同步属性，可以立即读取。

1，Response.ok
返回一个布尔值，表示请求是否成功，true对应 HTTP 请求的状态码 200 到 299，false对应其他的状态码。

2，Response.status
返回一个数字，表示 HTTP 回应的状态码（比如200，表示成功请求）。

3，Response.statusText
返回一个字符串，表示 HTTP 回应的状态信息（比如请求成功以后，服务器返回"OK"）。

4，Response.url
返回请求的 URL。如果 URL 存在跳转，该属性返回的是最终 URL。

5，Response.type
属性返回请求的类型。

basic：普通请求，即同源请求。
cors：跨域请求。
error：网络错误，主要用于 Service Worker。
opaque：如果fetch()请求的type属性设为no-cors，就会返回这个值，详见请求部分。表示发出的是简单的跨域请求，类似表单的那种跨域请求。
opaqueredirect：如果fetch()请求的redirect属性设为manual，就会返回这个值，详见请求部分。

6，Response.redirected
返回一个布尔值，表示请求是否发生过跳转。

三，判断是否成功

fetch()发出请求以后，有一个很重要的注意点：只有网络错误，或者无法连接时，fetch()才会报错，其他情况都不会报错，而是认为请求成功，即使服务器返回的状态码是 4xx 或 5xx也不会报错。
只有通过Response.status来判断请求是否成功

async function getJSON() {
  const url = 'xxx';
  try {
    const response = await fetch(url)
    if (response.status === 200) {
      return await response.json()
    } else {
      console.log(response.statusText)
    }
  } catch (error) {
    console.log('Request Failed', error)
  }
}

四，Response.headers 属性：指向一个 Headers 对象，对应 HTTP 回应的所有标头

Headers 对象提供了以下方法，用来操作标头。

Headers.get()：根据指定的键名，返回键值。
Headers.has()： 返回一个布尔值，表示是否包含某个标头。
Headers.set()：将指定的键名设置为新的键值，如果该键名不存在则会添加。
Headers.append()：添加标头。
Headers.delete()：删除标头。
Headers.keys()：返回一个遍历器，可以依次遍历所有键名。
Headers.values()：返回一个遍历器，可以依次遍历所有键值。
Headers.entries()：返回一个遍历器，可以依次遍历所有键值对（[key, value]）。
Headers.forEach()：依次遍历标头，每个标头都会执行一次参数函数。

上面的有些方法可以修改标头，那是因为继承自 Headers 接口。对于 HTTP 回应来说，修改标头意义不大，况且很多标头是只读的，浏览器不允许修改。
这些方法中，最常用的是response.headers.get()，用于读取某个标头的值。

五，读取内容的方法

Response对象根据服务器返回的不同类型的数据，提供了不同的读取方法。

response.text()：得到文本字符串。用于获取文本数据，比如 HTML 文件。
response.json()：得到 JSON 对象。用于获取服务器返回的 JSON 数据。
response.blob()：得到二进制 Blob 对象。用于获取二进制文件。
response.formData()：得到 FormData 表单对象。用在 Service Worker 里面，拦截用户提交的表单，修改某些数据以后，再提交给服务器。
response.arrayBuffer()：得到二进制 ArrayBuffer 对象。主要用于获取流媒体文件。

上面5个读取方法都是异步的，返回的都是 Promise 对象。必须等到异步操作结束，才能得到服务器返回的完整数据。
Stream 对象只能读取一次，读取完就没了。这意味着，这五个读取方法，只能使用一个，否则会报错。
Response 对象提供Response.clone()方法，创建Response对象的副本，实现多次读取。

const response1 = await fetch('hahaha.jpg');
const response2 = response1.clone();

const myBlob1 = await response1.blob();
const myBlob2 = await response2.blob();

image1.src = URL.createObjectURL(myBlob1);
image2.src = URL.createObjectURL(myBlob2);

Response.redirect() 用于将 Response 结果重定向到指定的 URL。
Response.body属性是 Response 对象暴露出的底层接口，返回一个 ReadableStream 对象，供用户操作。它可以用来分块读取内容，应用之一就是显示下载的进度。
response.body.getReader()方法返回一个遍历器。这个遍历器的read()方法每次返回一个对象，表示本次读取的内容块。

const response = await fetch('flower.jpg');
const reader = response.body.getReader();

while(true) {
  const {done, value} = await reader.read();

  if (done) {
    break;
  }

  console.log(`Received ${value.length} bytes`)
}

六，第二个可选参数init

这是一个配置项对象，包括所有对请求的设置。可选的参数有：

method: 请求使用的方法，如 GET、POST。
headers: 请求的头信息，形式为 Headers 的对象或包含 ByteString 值的对象字面量。
body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
mode: 请求的模式，如 cors、no-cors 或者 same-origin。
credentials: 请求的 credentials，如 omit、same-origin 或者 include。为了在当前域名内自动发送 cookie，必须提供这个选项，从 Chrome 50 开始，这个属性也可以接受 FederatedCredential (en-US) 实例或是一个 PasswordCredential (en-US) 实例。
cache: 请求的 cache 模式：default、 no-store、 reload 、 no-cache、 force-cache 或者 only-if-cached。
redirect: 可用的 redirect 模式：follow (自动重定向), error (如果产生重定向将自动终止并且抛出一个错误），或者 manual (手动处理重定向)。在 Chrome 中默认使用 follow（Chrome 47 之前的默认值是 manual）。
referrer: 一个 USVString 可以是 no-referrer、client 或一个 URL。默认是 client。
referrerPolicy: 指定了 HTTP 头部 referer 字段的值。可能为以下值之一：no-referrer、 no-referrer-when-downgrade、origin、origin-when-cross-origin、 unsafe-url。
integrity: 包括请求的 subresource integrity 值（例如： sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）。
signal: 属性指定一个 AbortSignal 实例，用于取消fetch()请求
keepalive: 属性用于页面卸载时，告诉浏览器在后台保持连接，继续发送数据。

const response = fetch(url, {
  method: "GET",
  headers: {
    "Content-Type": "text/plain;charset=UTF-8"
  },
  body: undefined,
  referrer: "about:client",
  referrerPolicy: "no-referrer-when-downgrade",
  mode: "cors", 
  credentials: "same-origin",
  cache: "default",
  redirect: "follow",
  integrity: "",
  keepalive: false,
  signal: undefined
});

七，取消请求

可以使用 AbortController 来终止 fetch() 请求。以下是一个示例：

const controller = new AbortController();
const signal = controller.signal;

fetch('https://example.com/data', { signal })
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('请求已被终止');
    } else {
      console.log('发生错误', error);
    }
  });

// 终止请求
controller.abort();

八，Fetch与Axios对比

Fetch和Axios都是用于发送网络请求的JavaScript库，它们可以发送HTTP请求并处理响应。以下是它们之间的一些区别和对比：

Fetch是内置的浏览器API，而Axios是第三方库。
Fetch使用Promise API，而Axios使用基于Promise的API，并支持async/await语法。
Axios支持请求和响应的拦截器，而Fetch不支持。
Axios具有自动转换响应数据的功能，而Fetch需要手动将响应数据转换为所需的格式。
Axios可以取消请求，而Fetch不支持取消请求。
Axios在处理错误时提供了更多的选项和控制，而Fetch只能捕获网络错误，无法处理HTTP错误。
总之，Fetch是一个简单易用的内置API，适用于发送基本的HTTP请求，而Axios则提供了更多的功能和控制，适用于大型复杂的应用程序。

优缺点：

Fetch的优点：
1，内置于浏览器，无需安装额外的库。
2，更加简单易用，语法简洁明了。
3，使用Promise API，支持链式调用。
4，支持流式数据传输。

Fetch的缺点：
1，没有自动的JSON解析功能，需要手动处理响应数据。
2，不支持请求的取消操作。
3，不支持在请求过程中上传文件。

Axios的优点：
1，支持请求的取消操作，可以中断正在进行的请求。
2，支持在请求过程中上传文件。
3，支持自动的JSON解析功能。
4，支持拦截请求和响应，方便进行统一的处理。

Axios的缺点：
1，需要额外安装库。
2，语法相对于Fetch较为复杂。
3，不支持流式数据传输。

综上所述，如果你需要一个简单易用、支持Promise API和流式数据传输的网络请求库，可以选择Fetch。如果你需要更多的功能，比如请求取消、文件上传、JSON解析和请求拦截等，可以选择Axios。