Fetch Api 概述
XMLHttpRequest 的问题：
所有的功能全部集中在同一个对象上，容易书写出混乱不易维护的代码。
采用传统的事件驱动模式，无法适配新的 Promise Api。
Fetch Api 的特点
1. 并非取代 AJAX，而是对 AJAX 传统 API 的改进。
2. 精细的功能分割：头部信息、请求信息、响应信息等均分布到不同的对象，更利于处理各种复杂的 AJAX 场景。
3. 使用 Promise APIX，更利于异步代码的书写。
4. Fetch Api 并非 ES6 的内容，属于 HTML5 新增的 web api。
Fetch Api 基本使用
使用fetch函数即可向服务器发送网络请求。
参数
该函数有两个参数：
必填，字符串，请求地址。
选填，对象，请求配置。
请求配置对象：
1. method：字符串，请求方法，默认值GET。
2. headers：对象，请求头信息。
3. body：请求体的内容，必须匹配请求头中的 Content-Type。
4. mode：字符串，请求模式。
cors：默认值，配置为该值，会在请求头中加入 origin 和 referer。
no-cors：配置为该值，不会在请求头中加入 origin 和 referer，跨域的时候可能会出现问题。
same-origin：指示请求必须在同一个域中发生，如果请求其他域，则会报错。
5. credentials：如何携带凭据（cookie）。
omit：默认值，不携带 cookie。
same-origin：请求同源地址时携带 cookie。
include：请求任何地址都携带 cookie。
6. cache：配置缓存模式。
default：表示 fetch 请求之前将检查下 http 的缓存。
no-store：表示 fetch 请求将完全忽略 http 缓存的存在，这意味着请求之前将不再检查下 http 的缓存，拿到响应后，它也不会更新 http 缓存。
no-cache：如果存在缓存，那么 fetch 将发送一个条件查询 request 和一个正常的 request，拿到响应后，它会更新 http 缓存。
reload：表示 fetch 请求之前将忽略 http 缓存的存在，但是请求拿到响应后，它将主动更新 http 缓存。
force-cache：表示 fetch 请求不顾一切的依赖缓存，即使缓存过期了，它依然从缓存中读取，除非没有任何缓存，那么它将发送一个正常的 request。
only-if-cached：表示 fetch 请求不顾一切的依赖缓存，即使缓存过期了，它依然从缓存中读取，如果没有缓存，它将抛出网络错误（该设置只在 mode 为 same-origin 时有效）。
返回值
fetch 函数返回一个 Promise 对象。
当收到服务器的返回结果后，Promise 进入 resolved 状态，状态数据为 Response 对象。
当网络发生错误（或其他导致无法完成交互的错误）时，Promise 进入 rejected 状态，状态数据为错误信息。
Response 对象：
1. ok：boolean，当响应消息码在 200~299 之间时为 true，其他未 false。
2. status：number，响应的状态码。
<button>得到数据</button>
<script>
function getProvices() {
const url = "";
const config = {
method: "GET",
// headers: {
// "Content-Type": "application/json",
// a: 1
// }
}
fetch(url, config).then(resp => {
console.log(resp);
}, err => {
console.log(err);
})
}
document.getElementsByTagName("button")[0].onclick = function() {
getProvices();
}
</script>
3. text()：用于处理文本格式的 Ajax 响应。它从响应中获取文本流，将其读完，然后返回一个被解决为 string 对象的 Promise。
<button>得到数据</button>
<script>
async function getProvices() {
const url = "";
const config = {
method: "GET",
// headers: {
// "Content-Type": "application/json",
// a: 1
// }
}
try{
const resp = await fetch(url, config);
const pro = await resp.text();
console.log(pro);
}catch(err) {
console.log(err);
}
}
document.getElementsByTagName("button")[0].onclick = function() {
getProvices();
}
</script>
4. blob()：用于处理二进制文件格式，（比如图片或电子表格）的 Ajax 响应。它读取文件的原始数据，一旦读取完整个文件，就返回一个被解决为 blob 对象的 Promise。
5. json()：用于处理 JSON 格式的 Ajax 的响应，它将 JSON 数据流转换为一个被解决为 JavaScript 对象的 Promise。
<button>得到数据</button>
<script>
async function getProvices() {
const url = "";
const config = {
method: "GET",
// headers: {
// "Content-Type": "application/json",
// a: 1
// }
}
try{
const resp = await fetch(url, config);
const pro = await resp.json();
console.log(pro);
}catch(err) {
console.log(err);
}
}
document.getElementsByTagName("button")[0].onclick = function() {
getProvices();
}
</script>
6. redirect()：可以用于重定向到另一个 URL。它会创建一个新的 Promise，以解决来自重定向的 URL 的响应。
Request 对象
除了使用基本的 fetch 方法，还可以通过创建一个 Request 对象来完成请求（实际上，fetch 的内部会帮你创建一个 Request 对象）。
new Request(url地址，配置)
<button>得到数据</button>
<script>
async function getProvices() {
const url = "";
const config = {
method: "GET",
// headers: {
// "Content-Type": "application/json",
// a: 1
// }
}
const req = new Request(url, config);
try{
const resp = await fetch(req);
const pro = await resp.json();
console.log(pro);
}catch(err) {
console.log(err);
}
}
document.getElementsByTagName("button")[0].onclick = function() {
getProvices();
}
</script>
<button>得到数据</button>
<script>
function getRequestInfo() {
const url = "";
const config = {
method: "GET",
// headers: {
// "Content-Type": "application/json",
// a: 1
// }
}
const req = new Request(url, config);
return req;
}
async function getProvices() {
try{
const resp = await fetch(getRequestInfo());
const pro = await resp.json();
console.log(pro);
}catch(err) {
console.log(err);
}
}
document.getElementsByTagName("button")[0].onclick = function() {
getProvices();
}
</script>
注意点：
尽量保证每次请求都是一个新的 Request 对象。
<button>得到数据</button>
<script>
let req;
function getRequestInfo() {
if(!req) {
const url = "";
const config = {
method: "GET",
// headers: {
// "Content-Type": "application/json",
// a: 1
// }
}
req = new Request(url, config);
}
return req.clone(); // 克隆一个全新的 request 对象，配置一致
}
async function getProvices() {
try{
const resp = await fetch(getRequestInfo());
const pro = await resp.json();
console.log(pro);
}catch(err) {
console.log(err);
}
}
document.getElementsByTagName("button")[0].onclick = function() {
getProvices();
}
</script>
Response 对象
ok：boolean，当响应消息码在 200~299 之间时为 true，其他未 false。
status：number，响应的状态码。
<button>得到数据</button>
<script>
function getProvices() {
const url = "https://xinxin52077.github.io/Travel/travel/dist/json/city.json";
const config = {
method: "GET",
// headers: {
// "Content-Type": "application/json",
// a: 1
// }
}
fetch(url, config).then(resp => {
console.log(resp);
}, err => {
console.log(err);
})
}
document.getElementsByTagName("button")[0].onclick = function() {
getProvices();
}
</script>
3. text()：用于处理文本格式的 Ajax 响应。它从响应中获取文本流，将其读完，然后返回一个被解决为 string 对象的 Promise。
<button>得到数据</button>
<script>
async function getProvices() {
const url = "";
const config = {
method: "GET",
// headers: {
// "Content-Type": "application/json",
// a: 1
// }
}
try{
const resp = await fetch(url, config);
const pro = await resp.text();
console.log(pro);
}catch(err) {
console.log(err);
}
}
document.getElementsByTagName("button")[0].onclick = function() {
getProvices();
}
</script>
4. blob()：用于处理二进制文件格式，（比如图片或电子表格）的 Ajax 响应。它读取文件的原始数据，一旦读取完整个文件，就返回一个被解决为 blob 对象的 Promise。
5. json()：用于处理 JSON 格式的 Ajax 的响应，它将 JSON 数据流转换为一个被解决为 JavaScript 对象的 Promise。
<button>得到数据</button>
<script>
async function getProvices() {
const url = "";
const config = {
method: "GET",
// headers: {
// "Content-Type": "application/json",
// a: 1
// }
}
try{
const resp = await fetch(url, config);
const pro = await resp.json();
console.log(pro);
}catch(err) {
console.log(err);
}
}
document.getElementsByTagName("button")[0].onclick = function() {
getProvices();
}
</script>
6. redirect()：可以用于重定向到另一个 URL。它会创建一个新的 Promise，以解决来自重定向的 URL 的响应。
<button>得到数据</button>
<script>
let req;
function getRequestInfo() {
if(!req) {
const url = "";
const config = {
method: "GET",
// headers: {
// "Content-Type": "application/json",
// a: 1
// }
}
req = new Request(url, config);
}
return req.clone(); // 克隆一个全新的 request 对象，配置一致
}
async function getProvices() {
try{
// const resp = await fetch(getRequestInfo());
const resp = new Response(`[
{"id": 1, "name": "北京"},
{"id": 2, "name": "广东"}
]`, {
ok: true,
status: 200
});
const pro = await getJson(resp);
console.log(pro);
}catch(err) {
console.log(err);
}
}
async function getJson(resp) {
const json = await resp.json();
return json;
}
document.getElementsByTagName("button")[0].onclick = function() {
getProvices();
}
</script>
Headers 对象
<button>得到数据</button>
<script>
let req;
function getRequestInfo() {
if(!req) {
const url = "";
const config = {
method: "GET",
headers: {
a: 1
}
}
req = new Request(url, config);
console.log(req.headers);
}
return req.clone(); // 克隆一个全新的 request 对象，配置一致
}
async function getProvices() {
try{
const resp = await fetch(getRequestInfo());
// const resp = new Response(`[
// {"id": 1, "name": "北京"},
// {"id": 2, "name": "广东"}
// ]`, {
// ok: true,
// status: 200
// });
const pro = await getJson(resp);
console.log(pro);
}catch(err) {
console.log(err);
}
}
async function getJson(resp) {
const json = await resp.json();
return json;
}
document.getElementsByTagName("button")[0].onclick = function() {
getProvices();
}
</script>
在 Request 和 Response 对象内部，会将传递的请求头对象，转换为 Headers。
Headers 对象中的方法：
- has(key)：检查请求头中是否存在指定的 key 值。
<button>得到数据</button>
<script>
let req;
function getCommonHeader() {
return new Headers({
a: 1
})
}
function getRequestInfo() {
if(!req) {
const url = "";
const headers = getCommonHeader();
const config = {
method: "GET",
headers
}
req = new Request(url, config);
console.log(req.headers.has("a")); // true
console.log(req.headers.has("c")); // false
}
return req.clone(); // 克隆一个全新的 request 对象，配置一致
}
async function getProvices() {
try{
const resp = await fetch(getRequestInfo());
// const resp = new Response(`[
// {"id": 1, "name": "北京"},
// {"id": 2, "name": "广东"}
// ]`, {
// ok: true,
// status: 200
// });
const pro = await getJson(resp);
console.log(pro);
}catch(err) {
console.log(err);
}
}
async function getJson(resp) {
const json = await resp.json();
return json;
}
document.getElementsByTagName("button")[0].onclick = function() {
getProvices();
}
</script>
- get(key)：得到请求头中对应的 key 值。
<button>得到数据</button>
<script>
let req;
function getCommonHeader() {
return new Headers({
a: 1
})
}
function getRequestInfo() {
if(!req) {
const url = "";
const headers = getCommonHeader();
const config = {
method: "GET",
headers
}
req = new Request(url, config);
console.log(req.headers.get("a")); // 1
console.log(req.headers.get("c")); // null
}
return req.clone(); // 克隆一个全新的 request 对象，配置一致
}
async function getProvices() {
try{
const resp = await fetch(getRequestInfo());
// const resp = new Response(`[
// {"id": 1, "name": "北京"},
// {"id": 2, "name": "广东"}
// ]`, {
// ok: true,
// status: 200
// });
const pro = await getJson(resp);
console.log(pro);
}catch(err) {
console.log(err);
}
}
async function getJson(resp) {
const json = await resp.json();
return json;
}
document.getElementsByTagName("button")[0].onclick = function() {
getProvices();
}
</script>
- set(key, value)：修改对应的键值对。
<button>得到数据</button>
<script>
let req;
function getCommonHeader() {
return new Headers({
a: 1
})
}
function getRequestInfo() {
if(!req) {
const url = "";
const headers = getCommonHeader();
const config = {
method: "GET",
headers
}
req = new Request(url, config);
console.log(req.headers.set("a", 2)); // undefined
console.log(req.headers.set("c", 3)); // undefined
console.log(req.headers.get("a")); // 2
console.log(req.headers.get("c")); // 3
}
return req.clone(); // 克隆一个全新的 request 对象，配置一致
}
async function getProvices() {
try{
const resp = await fetch(getRequestInfo());
// const resp = new Response(`[
// {"id": 1, "name": "北京"},
// {"id": 2, "name": "广东"}
// ]`, {
// ok: true,
// status: 200
// });
const pro = await getJson(resp);
console.log(pro);
}catch(err) {
console.log(err);
}
}
async function getJson(resp) {
const json = await resp.json();
return json;
}
document.getElementsByTagName("button")[0].onclick = function() {
getProvices();
}
</script>
- append(key, value)：添加对应的键值对。
<button>得到数据</button>
<script>
let req;
function getCommonHeader() {
return new Headers({
a: 1
})
}
function getRequestInfo() {
if(!req) {
const url = "";
const headers = getCommonHeader();
const config = {
method: "GET",
headers
}
req = new Request(url, config);
console.log(req.headers.append("a", 2)); // undefined
console.log(req.headers.append("c", 3)); // undefined
console.log(req.headers.get("a")); // 1，2
console.log(req.headers.get("c")); // 3
}
return req.clone(); // 克隆一个全新的 request 对象，配置一致
}
async function getProvices() {
try{
const resp = await fetch(getRequestInfo());
// const resp = new Response(`[
// {"id": 1, "name": "北京"},
// {"id": 2, "name": "广东"}
// ]`, {
// ok: true,
// status: 200
// });
const pro = await getJson(resp);
console.log(pro);
}catch(err) {
console.log(err);
}
}
async function getJson(resp) {
const json = await resp.json();
return json;
}
document.getElementsByTagName("button")[0].onclick = function() {
getProvices();
}
</script>
- keys()：得到所有的请求头 键 的集合。
<button>得到数据</button>
<script>
let req;
function getCommonHeader() {
return new Headers({
a: 1
})
}
function getRequestInfo() {
if(!req) {
const url = "";
const headers = getCommonHeader();
const config = {
method: "GET",
headers
}
headers.append("c", 7);
req = new Request(url, config);
const datas = req.headers.keys();
for(const d of datas) {
console.log(d); // a c
}
}
return req.clone(); // 克隆一个全新的 request 对象，配置一致
}
async function getProvices() {
try{
const resp = await fetch(getRequestInfo());
// const resp = new Response(`[
// {"id": 1, "name": "北京"},
// {"id": 2, "name": "广东"}
// ]`, {
// ok: true,
// status: 200
// });
const pro = await getJson(resp);
console.log(pro);
}catch(err) {
console.log(err);
}
}
async function getJson(resp) {
const json = await resp.json();
return json;
}
document.getElementsByTagName("button")[0].onclick = function() {
getProvices();
}
</script>
- values()：得到所有的请求头 值 的集合。
<button>得到数据</button>
<script>
let req;
function getCommonHeader() {
return new Headers({
a: 1
})
}
function getRequestInfo() {
if(!req) {
const url = "";
const headers = getCommonHeader();
const config = {
method: "GET",
headers
}
headers.append("c", 7);
req = new Request(url, config);
const datas = req.headers.values();
for(const d of datas) {
console.log(d); // 1 7
}
}
return req.clone(); // 克隆一个全新的 request 对象，配置一致
}
async function getProvices() {
try{
const resp = await fetch(getRequestInfo());
// const resp = new Response(`[
// {"id": 1, "name": "北京"},
// {"id": 2, "name": "广东"}
// ]`, {
// ok: true,
// status: 200
// });
const pro = await getJson(resp);
console.log(pro);
}catch(err) {
console.log(err);
}
}
async function getJson(resp) {
const json = await resp.json();
return json;
}
document.getElementsByTagName("button")[0].onclick = function() {
getProvices();
}
</script>
- entries()：得到所有的请求头 键值 的集合。
<button>得到数据</button>
<script>
let req;
function getCommonHeader() {
return new Headers({
a: 1
})
}
function getRequestInfo() {
if(!req) {
const url = "";
const headers = getCommonHeader();
const config = {
method: "GET",
headers
}
headers.append("c", 7);
req = new Request(url, config);
const datas = req.headers.entries();
for(const d of datas) {
console.log(d); // ["a", "1"] ["c", "7"]
}
}
return req.clone(); // 克隆一个全新的 request 对象，配置一致
}
async function getProvices() {
try{
const resp = await fetch(getRequestInfo());
// const resp = new Response(`[
// {"id": 1, "name": "北京"},
// {"id": 2, "name": "广东"}
// ]`, {
// ok: true,
// status: 200
// });
const pro = await getJson(resp);
console.log(pro);
}catch(err) {
console.log(err);
}
}
async function getJson(resp) {
const json = await resp.json();
return json;
}
document.getElementsByTagName("button")[0].onclick = function() {
getProvices();
}
</script>
<button>得到数据</button>
<script>
let req;
function getCommonHeader() {
return new Headers({
a: 1
})
}
function getRequestInfo() {
if(!req) {
const url = "";
const headers = getCommonHeader();
const config = {
method: "GET",
headers
}
headers.append("c", 7);
req = new Request(url, config);
const datas = req.headers.entries();
for(const d of datas) {
console.log(`key : ${d[0]}, value : ${d[1]}`); // ["a", "1"] ["c", "7"]
}
}
return req.clone(); // 克隆一个全新的 request 对象，配置一致
}
async function getProvices() {
try{
const resp = await fetch(getRequestInfo());
// const resp = new Response(`[
// {"id": 1, "name": "北京"},
// {"id": 2, "name": "广东"}
// ]`, {
// ok: true,
// status: 200
// });
const pro = await getJson(resp);
console.log(pro);
}catch(err) {
console.log(err);
}
}
async function getJson(resp) {
const json = await resp.json();
return json;
}
document.getElementsByTagName("button")[0].onclick = function() {
getProvices();
}
</script>
文件上传
流程：
客户端将文件数据发送给服务器。
服务器保存上传的文件数据到服务器端。
服务器响应给客户端一个文件访问地址。
请求方法：POST。
请求的表单格式：multipart/form-data。
请求体中必须包含一个键值对，键的名称是服务器要求的名称，值是文件数据。（键的名称：表单域名称， imagefile）
HTML5中，JS仍然无法随意的获取文件数据，但是可以获取到 input 中，被用户选中的文件数据。
可以利用 HTML5 提供的 FormData 构造函数来创建请求体。
<img src="" alt="" id="img">
<input type="file" id="input">
<button>上传</button>
<script>
async function upload() {
const inp = document.getElementById("input");
if(inp.files.length === 0) {
alert("请选择要上传的文件");
}
const formData = new FormData(); // 构建请求体
formData.append("imagefile", inp.files[0]);
const url = "";
const resp = await fetch(url, {
method: "POST",
body: formData // 自动修改请求头
})
const result = await resp.json();
console.log(result);
return result;
}
document.getElementsByTagName("button")[0].onclick = async function() {
const result = await upload();
console.log(result);
const img = document.getElementById("img");
img.src = result.path;
}
</script>
