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

前言

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

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

XMLHttpRequest 后面都叫 XHR 吧。

fetch 特点

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

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

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

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

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

fetch 语法

fetch(input [, init]);

input 入参

1. 字符串类型、一个可以访问的URL地址。

2. Request 对象。在 sw 中 fetch 事件捕获到的就是 Request 对象。

init 入参

这是一个对象。

1. method请求方式

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

2. headers请求头

a.Headers 对象

b.对象形式

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.credentialscookie携带的方式

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显示进度条并下载