1.前言
1.之前写了篇文章前端请求的5种方式
2.其中
fetch的方式应该还是 不熟悉3.所以这篇文章详细的梳理下
fetch
2. 是什么
Fetch API 提供了一个
JavaScript 接口，用于访问和操纵HTTP 管道的一些具体部分例如请求和响应。它还提供了一个全局
fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。这种功能以前是使用
XMLHttpRequest实现的。
Fetch提供了一个更理想的替代方案，可以很容易地被其他技术使用，例如
Service Workers(en-US)。Fetch 还提供了专门的逻辑空间来定义其他与 HTTP 相关的概念，例如
CORS和HTTP的扩展。简单总结的话 就是类似
axios,使用Promise语法,但是浏览器原生支持,不需要下载第三方的文件
3. 基础语法 get请求
3.1 简要demo
let registerFn = () => { fetch(`/getData?name=${userName.value}&password=${password.value}`).then(res => { return res.json() }).then(res => { console.log("get 结果:", res) }).catch(error => { console.log("错误:", error) }) }
3.2 简要分析
- 默认是
get请求fetch()2个参数
参数1: 服务器地址
参数2: 可选的 配置参数
HTTP 请求的方法、标头、数据体都在这个对象里面设置3.
fetch()采用模块化设计，API 分散在多个对象上（Response对象、Request对象、Headers对象）4.
fetch()使用Promise，不使用回调函数，因此大大简化了写法，写起来更简洁5.
response是一个 Stream 对象
3. 配置参数
HTTP 请求的方法、标头、数据体都在这个对象里面设置
{ body: JSON.stringify(data), //必须和'Content-Type' 匹配 cache: 'no-cache', // 是否需要缓存,可以的值, no-cache, reload, force-cache, only-if-cached credentials: 'same-origin', // include, same-origin, *omit headers: { 'user-agent': 'Mozilla/4.0 MDN Example', 'content-type': 'application/json' }, method: 'POST', // *GET, POST, PUT, DELETE, etc. mode: 'cors', // no-cors, cors, *same-origin redirect: 'follow', // manual, *follow, error referrer: 'no-referrer', // *client, no-referrer }
3.1 credentials
include浏览器发送 cookie（即使是跨域源也发送)
same-origin和 脚本 同源 才发送cookie
omit不使用cookie
3.2 第一个then
一般第一个
then做一个数据的 格式化例如: res.json()
4. post请求 常用配置
服务器 本地用
node随便写的下面是
post写法
let loginFn = async () => { let data = { name: "yzs", password: "123456" } try { let res = await fetch("/login", { method: "POST", body:JSON.stringify(data) }).then(res => res.json()) console.log("post 结果:", res) } catch (error) { // fetch 里面的 catch console.log("error:", error) } }
5. post 单文件上传
let upload = async () => { let file = document.querySelector("input[type=file]").files[0]; // 表单数据对象 let formatData = new FormData() // 第一个 key fileInfo // 第二个value是对应的值 file // 把上传的内容添加到表单 数据对象里面 formatData.append("fileInfo", file) try { let res = await fetch("/myupload", { method: "POST", body: formatData }).then(res => res.json()) showImg.src = res.path console.log("成功:", res); } catch (error) { console.log("error", error) } }
6. post 多文件上传配置
var formData = new FormData(); var photos = document.querySelector("input[type='file'][multiple]"); formData.append('title', 'My Vegas Vacation'); // formData 只接受文件、Blob 或字符串，不能直接传递数组，所以必须循环嵌入 for (let i = 0; i < photos.files.length; i++) { formData.append('photo', photos.files[i]); }
7. 重点 post 请求头配置
post的body数据要和content-type匹配不然请求不成功
7.1 json数据配置
const response = await fetch('/login', { method: 'POST', body: JSON.stringify({ name: "yzs尹",password:"123456" }), headers: { 'Content-Type': 'application/json;charset=utf-8' } })
7.2 key-value配置
const response = await fetch('/list', { method: 'POST', headers: { "Content-type": "application/x-www-form-urlencoded; charset=UTF-8", }, body: 'name=yzs&password=123456' })
7.3 表单配置
const form = document.querySelector('form'); const response = await fetch('/submit', { method: 'POST', body: new FormData(form) })
7.4 上传配置
const input = document.querySelector('input[type="file"]'); const data = new FormData(); data.append('file', input.files[0]); //额外追加数据 data.append('name', 'yzs'); fetch('/upload', { method: 'POST', body: data });
上传 肯定得通过表单 ,所以其实和表单提交 差不多
7.4 二进制数据
做一些图片的转化 时会用到二进制上传
let blob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png') ); let response = await fetch('/user/avatar', { method: 'POST', body:data
canvasElem借助画布的toBlob功能也可以使用画布的
toDataURL
