前端培训-中级阶段（28）- fetch 请求（2019-12-05期）

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

前言

fetch 用于获取资源（包括跨域请求），其实和 XMLHttpRequest 差不多。那么为什么 AJAX 的解决方案已经有了，我们还要搞出一个新的API？

其实这是符合规则的。不是说 XMLHttpRequest 不好。而是科技发展就是这样，过个几年就要来点颠覆性的更新。

XMLHttpRequest 后面都叫 XHR 吧。

fetch 特点

默认不带 Cookie，这是一大槽点，我才接触的时候就经常吐槽（但是现在已经改了）。

自从2017年8月25日后，默认的 credentials 政策变更为 same-originFirefox 也在 61.0b13 中改变默认值
使用 Fetch - mdn
请求不能中途终止（XHR有abort()）

浏览器已经开始为 AbortController 和 AbortSignal 接口（也就是Abort API）添加实验性支持，允许像 Fetch 和 XHR 这样的操作在还未完成时被中止
Fetch API - mdn
Promise，写起来的确是比回调舒服
上传进度、下载进度（当做流，然后处理也能模拟）

fetch 语法

fetch(input [, init]);

input 入参

字符串类型、一个可以访问的URL地址。
Request 对象。在 sw 中 fetch 事件捕获到的就是 Request 对象。

init 入参

这是一个对象。

method 请求方式
1. 字符串类型 get、post、put 等
headers 请求头
1. Headers 对象
2. 对象形式
body 消息体，支持的和 XHR 一样。get 需要自己拼接在URL上
1. Blob、File 比如input选择的文件
2. Buffer
3. FormData 表单上传 content-type: multipart/form-data
4. URLSearchParams content-type: application/x-www-form-urlencoded
5. String
mode
1. 字符串类型
  1. cors 跨域请求
  2. no-cors 正常的网络请求（默认）
  3. same-origin 只请求同域
credentials cookie携带的方式
1. 字符串类型
  1. omit 不携带 cookie （早期默认值，后来改了）
  2. same-origin 同域请求携带 cookie （默认值）
  3. include 一直携带 cookie。不考虑同域跨域
cache 缓存模式
1. 字符串类型 default、no-store、reload、no-cache、force-cache、only-if-cached
redirect 重定向处理方式
1. 字符串类型
  1. follow 自动处理，跟随跳转（早期默认值，后来改了）
  2. manual 阻止、（默认值）
  3. error 禁止处理
referrer 请求来源
1. 字符串类型 url地址，不可跨域。可以是相对路径
  1. client 标识客户端自己处理。默认
  2. no-referrer 不传递
referrerPolicy
1. 字符串类型 no-referrer、no-referrer-when-downgrade、origin、origin-when-cross-origin、unsafe-url
integrity 校验

fetch 使用实战

get请求

fetch(`https://www.lilnong.top/cors/get?ref=SF`)
    .then(v=>v.json())
    .then(v=>console.log(v))

post请求

因为get的不涉及到 content-type 所以还相对的简单一些。下面我们来针对不同的 content-type 写一下

application/json

fetch(`https://www.lilnong.top/cors/post?ref=SF`,{
        method:'post',
        headers: {'content-type':'application/json'},
        body:JSON.stringify({bodyRef:'SF'})
    })
    .then(v=>v.json())
    .then(v=>console.log(v))

multipart/form-data

fm = new FormData();
fm.append('type','formdata')
fm.append('bodyRef','SF')
fetch(`https://www.lilnong.top/cors/post?ref=SF`,{
        method:'post',
        body:fm
    })
    .then(v=>v.json())
    .then(v=>console.log(v))

application/x-www-form-urlencoded

fetch(`https://www.lilnong.top/cors/post?ref=SF`,{
        method:'post',
        body:new URLSearchParams({type: 'URLSearchParams',bodyRef:'SF'})
    })
    .then(v=>v.json())
    .then(v=>console.log(v))

post 上传文件

上传文件只能使用multipart/form-data。所以我们就是用FormData 对象。有时候我们需要给文件添加 filename。

append 方案

fm.append(name,value,filename) value里面放 Blob 对象或者File 都可以。这里可以传入 filename。

File 方案

File 对象自带 filename, new File(fileBits, fileName, options) 可以把 Blob 初始化成 File 对象。

ajax 获取图片并渲染

fetch(`//cors-www.lilnong.top/static/img/wx-linong.jpg`)
    .then(v=>v.blob())
    .then(v=>console.log(v,URL.createObjectURL(v)))