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

Jan 2, 2020

思否

前端最基础的就是 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 请求方式

字符串类型 get、post、put 等

headers 请求头

Headers 对象

对象形式

body 消息体，支持的和 XHR 一样。get 需要自己拼接在URL上

Blob、File 比如input选择的文件

Buffer
FormData 表单上传 content-type: multipart/form-data
URLSearchParams content-type: application/x-www-form-urlencoded
String

mode

字符串类型

cors 跨域请求

no-cors 正常的网络请求（默认）

same-origin 只请求同域

credentials cookie携带的方式

字符串类型

omit 不携带 cookie （早期默认值，后来改了）

same-origin 同域请求携带 cookie （默认值）

include 一直携带 cookie。不考虑同域跨域

cache 缓存模式

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

redirect 重定向处理方式

字符串类型

follow 自动处理，跟随跳转（早期默认值，后来改了）

manual 阻止、（默认值）

error 禁止处理

referrer 请求来源

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

client 标识客户端自己处理。默认

no-referrer 不传递

referrerPolicy

字符串类型 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)))

fetch 下载进度条展示

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

微信公众号：前端linong

参考文献

原文：SegmentFault

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

前言

fetch 特点

fetch 语法

input 入参

init 入参

fetch 使用实战

get请求

post请求

application/json

multipart/form-data

application/x-www-form-urlencoded

post 上传文件

append 方案

File 方案

ajax 获取图片并渲染

fetch 下载进度条展示

微信公众号：前端linong

参考文献

评论