Fetch 学习

什么是Fetch

Fetch API是XMLHttpRequest的升级版，浏览器原生提供，用于发送HTTP请求，属于HTML5新增的API。

优点

• fetch()使用Promise，更符合现代主流的ES规范
• 采用模块化设计，设计有Headers、Request、Response，相比XHR更符合关注分离（Separation of Concerns）原则
• 通过Stream对象处理数据，可以分块读取，减少内存占用，有利于优化网站性能

缺点

• fetch()属于浏览器原生提供的api，使用时需要进一步封装（统一方式、拦截器、超时、取消、捕获错误、返回数据、loading等），相对于直接使用axios等现成的XHR封装库存在一定的工作量；
• 较老的浏览器上可能还需要兼容；

注意点

• fetch()除网络故障或请求被阻止时，返回reject外，其余情况都会标记为resolve（即HTTP响应状态码为404或500等，也会标记为resolve）；
• fetch()默认不发送cookies，需要手动设置credentials:include

基本使用

// GET
fetch('http://example.com/movies.json')
  .then((response) => {
    return response.json();
  })
  .then((myJson) => {
    console.log(myJson);
  });

// POST
fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  body: JSON.stringify(jsonData)
})
  .then(response => {
    return response.json()
  })
  .then(myJson => {
    console.log(myJson)
  })
  .catch(err => {
    console.error(err)
  })

fetch()完整配置

// async
const response = await fetch(url, {
  method: "GET", // http请求方法，GET/POST/DELETE/PUT等
  headers: { // 请求头配置
    "Content-Type": "text/plain;charset=UTF-8"
  },
  body: undefined, // 请求数据体
  referrer: "about:client", // 请求来源标识
  referrerPolicy: "no-referrer-when-downgrade", // 指定referrer的规则
  mode: "cors", // 指定请求的模式，默认cors，支持same-origin、no-cors
  credentials: "same-origin", // 指定是否发送Cookie，默认same-origin，支持include、omit
  cache: "default", // 指定如何处理缓存，默认default，支持no-store、reload、no-cache、force-cache、only-if-cached
  redirect: "follow", // 指定HTTP跳转的处理方式，默认follow，支持error、manual
  integrity: "", // 指定一个哈希值，用于检查HTTP响应的是否为这个预设的哈希值
  keepalive: false, // 页面卸载时，是否通知后台保持连接
  signal: undefined, // 指定AbortSignal实例，用于取消fetch请求
})

处理响应

判断状态

1.通过状态码判断

// async
try {
  const res = await fetch(url)
  if(res.status >= 200 && res.status < 300) {
    return await res.text()
  }else {
    return new Error(res.statusText)
  }
} catch(err) {
  throw err
}

2.通过Response对象的ok参数判断(对应状态码200-299)

// async
const res = await fetch(url)
if(res.ok) {
  return await res.text()
}else {
  return new Error(res.statusText)
}

读取内容

1.text数据

// async
const res = awati fetch(url, {
  headers: {
    "Content-Type": "text/plain;charset=UTF-8"
  }
})
if(res.headers.get("content-type") === 'text/plain') {
  return await res.text()
}

2.json数据

// async
const res = awati fetch(url, {
  headers: {
    "Content-Type": "application/json;charset=UTF-8"
  }
})
if(res.headers.get("content-type") === 'application/json') {
  return await res.json()
}

3.blob数据

// async
const res = awati fetch(url)
const blobRes = await res.blob()
const objURL = URL.createObjectURL(blobRes)
const img = document.querySelector('img')

img.src = objURL

4.arrayBuffer

const audioCtx = new window.AudioContext();
const source = audioCtx.createBufferSource();

const response = await fetch(url);
const buffer = await response.arrayBuffer();

const decodeData = await audioCtx.decodeAudioData(buffer);
source.buffer = buffer;
source.connect(audioCtx.destination);
source.loop = true;

取消fetch()

通过Fetch提供的AbortController对象，能够取消fetch()请求

let controller = new AbortController();
setTimeout(() => controller.abort(), 1000);

try {
  let response = await fetch(url, {
    signal: controller.signal
  });
} catch(err) {
  if (err.name == 'AbortError') {
    console.log('Aborted!');
  } else {
    throw err;
  }
}

Fetch + ts封装公共request.ts

未完待续