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
参考资料
fetch-MDN
阮一峰-fetch