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

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

前言

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

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

XMLHttpRequest 后面都叫 XHR 吧。

fetch 特点

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

   自从2017年8月25日后，默认的 credentials 政策变更为 same-originFirefox 也在 61.0b13 中改变默认值
   使用 Fetch - mdn

2. 请求不能中途终止（XHR有abort()）

   浏览器已经开始为 AbortController 和 AbortSignal 接口（也就是Abort API）添加实验性支持，允许像 Fetch 和 XHR 这样的操作在还未完成时被中止
   Fetch API - mdn

3. Promise，写起来的确是比回调舒服
4. 上传进度、下载进度（当做流，然后处理也能模拟）

fetch 语法

fetch(input [, init]);

input 入参

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

init 入参

这是一个对象。

1. method 请求方式

   1. 字符串类型 get、post、put 等

2. headers 请求头

   1. Headers 对象
   2. 对象形式

3. 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

4. mode

   1. 字符串类型

      1. cors 跨域请求
      2. no-cors 正常的网络请求（默认）
      3. same-origin 只请求同域

5. credentials cookie携带的方式

   1. 字符串类型

      1. omit 不携带 cookie （早期默认值，后来改了）
      2. same-origin 同域请求携带 cookie （默认值）
      3. include 一直携带 cookie。不考虑同域跨域

6. cache 缓存模式

   1. 字符串类型 default、no-store、reload、no-cache、force-cache、only-if-cached

7. redirect 重定向处理方式

   1. 字符串类型

      1. follow 自动处理，跟随跳转（早期默认值，后来改了）
      2. manual 阻止、（默认值）
      3. error 禁止处理

8. referrer 请求来源

   1. 字符串类型 url地址，不可跨域。可以是相对路径

      1. client 标识客户端自己处理。默认
      2. no-referrer 不传递

9. referrerPolicy

   1. 字符串类型 no-referrer、no-referrer-when-downgrade、origin、origin-when-cross-origin、unsafe-url
10. 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)))

fetch 下载进度条展示

文章地址
测试地址-fetch显示进度条并下载

微信公众号：前端linong

参考文献

1. 前端培训目录、前端培训规划、前端培训计划