关于 Fetch

例子

fetch(url)
  .then(res => res.json())
  .then(data => {
    // ...
  });

const getData = async (url) => {
  try {
    const res = await fetch(url);
    const data = await res.json();
    // ...
  } catch(e) {
    // ...
  }
}

基础

一些知识点：

• 响应返回 4xx 和 4xx 的状态码时，不会 reject
• 只在网络失败时 reject
• 默认不发送和接收 cookie
• 相比 Ajax 通常只处理 JSON 和 XML，fetch 可以处理更多数据类型

cros

fetch(url, {
  mode: 'no-cors',
});

可以配在 HTML 元素的 src 上的数据都可以配 no-cors，比如图片、音频、视频、脚本等。

Request

const headers = new Headers({
  'Content-Type': 'text/plain',
});
const options = {
  method,
  headers,
  mode: 'cors',
  cache: 'default',
};
const request = new Request('a.jpg', options);

fetch(request)
  // .then();

Response

res.blob();
res.json();
res.text();
res.formData();
res.arrayBuffer();

res.blob() 怎么用？

比如：fetch 一个图片的数据，然后转成 url 赋到图片元素上。

fetch('a.jpg')
  .then(res => res.blob())
  .then(res => {
    const url = URL.createObjectURL(res);
    imageEl.src = url;
  });

其他

• 出于性能的考虑，Request 和 Response 的 Body 只能读一次
• 但是可以显式 clone() 后重复读