1.Fetch Api 概述
XMLHttpRequest的问题
- 所有的功能全部集中在同一个对象上,容易书写出混乱不易维护的代码
- 采用传统的事件驱动模式,无法适配新的 Promise Api
Fetch Api 的特点
- 并非取代 AJAX,而是对 AJAX 传统 API 的改进
- 精细的功能分割:头部信息、请求信息、响应信息等均分布到不同的对象,更利于处理各种复杂的 AJAX 场景
- 使用 Promise Api,更利于异步代码的书写
- Fetch Api 并非 ES6 的内容,属于 HTML5 新增的 Web Api
- 需要掌握网络通信的知识
2.基本使用
使用 fetch
函数即可立即向服务器发送网络请求
参数
该函数有两个参数:
- 必填,字符串,请求地址
- 选填,对象,请求配置
请求配置对象
method
:字符串,请求方法,默认值GETheaders
:对象,请求头信息body
: 请求体的内容,必须匹配请求头中的 Content-Type- mode:字符串,请求模式
- cors:默认值,配置为该值,会在请求头中加入 origin 和 referer
- no-cors:配置为该值,不会在请求头中加入 origin 和 referer,跨域的时候可能会出现问题
- same-origin:指示请求必须在同一个域中发生,如果请求其他域,则会报错
- credentials: 如何携带凭据(cookie)
- omit:默认值,不携带cookie
- same-origin:请求同源地址时携带cookie
- include:请求任何地址都携带cookie
- 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”时有效).
async function getProvinces() {
const url = 'http://101.132.72.36:5100/api/local';
const config = { // 配置对象
method : 'GET',
header : {
a : 1
}
}
fetch(url,config);
}
getProvinces();
返回值
fetch 函数返回一个 Promise 对象
- 当收到服务器的返回结果后,Promise 进入
resolved
状态,状态数据为Response
对象 - 当网络发生错误(或其他导致无法完成交互的错误)时,Promise 进入
rejected
状态,状态数据为错误信息
async function getProvinces() {
const url = 'http://101.132.72.36:5100/api/local';
const config = {
method : 'GET',
header : {
a : 1
}
}
try {
const resp = await fetch(url,config);
console.log(resp); // resolved状态————只要服务器返回结果, 返回的是一个Response对象;
} catch (err) {
console.log(err); // rejected状态————发生错误
}
}
getProvinces();
Response对象
- ok:boolean,当响应消息码在200~299之间时为true,其他为false
- status:number,响应的状态码
- text():用于处理文本格式的 Ajax 响应。它从响应中获取文本流,将其读完,然后返回一个被解决为 string 对象的 Promise。
- blob():用于处理二进制文件格式(比如图片或者电子表格)的 Ajax 响应。它读取文件的原始数据,一旦读取完整个文件,就返回一个被解决为 blob 对象的 Promise。
-json()
:用于处理 JSON 格式的 Ajax 的响应。它将 JSON 数据流转换为一个被解决为 JavaScript 对象的promise。 - redirect():可以用于重定向到另一个 URL。它会创建一个新的 Promise,以解决来自重定向的 URL 的响应。
// 解析成文本
async function getProvinces() {
const url = "http://101.132.72.36:5100/api/local";
const resp = await fetch(url)
const result = await resp.text();
console.log(result)
}
getProvinces();
// 解析成json对象格式
async function getProvinces() {
const url = "http://101.132.72.36:5100/api/local";
const resp = await fetch(url)
const result = await resp.json();
console.log(result)
}
getProvinces();
3.Request对象
除了使用基本的fetch方法,还可以通过创建一个Request对象来完成请求(实际上,fetch的内部会帮你创建一个Request对象)
new Request(url地址, 配置)
// 通过创建 Request对象 发送请求
async function getProvinces() {
const url = "http://101.132.72.36:5100/api/local";
const req =new Request(url,{});
const resp = await fetch(req);
const result = await resp.json();
console.log(result);.; // 获取省份数据,是一个json对象
}
getProvinces();
注意点:
尽量保证每次请求都是一个新的Request对象
let req;
function getRequestInfo() {
if (!req) { // 没有的话会新创建一个Request对象
const url = "http://101.132.72.36:5100/api/local";
req = new Request(url, {});
console.log(req);
}
return req.clone(); //克隆一个全新的request对象,配置一致
}
async function getProvinces() {
const resp = await fetch(getRequestInfo())
const result = await resp.json();
console.log(result)
}
getProvinces();
4.Response对象
当从服务器收到消息之后会自动创建一个Response对象;而Response对象也可以手动的进行创建。
let req;
function getRequestInfo() {
if (!req) {
const url = "http://101.132.72.36:5100/api/local";
req = new Request(url, {});
console.log(req);
}
return req.clone(); //克隆一个全新的request对象,配置一致
}
async function getProvinces() {
// const resp = await fetch(getRequestInfo())
// 手动构建一个Response对象进行测试; 第一个参数是响应体里的数据,后面是配置对象;
const resp = new Response(`[
{"id":1, "name":"北京"},
{"id":2, "name":"天津"}
]`, { // 配置对象
ok: true,
status: 200
})
const result = await getJSON(resp);
console.log(result)
}
async function getJSON(resp) {
const json = await resp.json();
return json;
}
getProvinces();
5.Headers 对象
在Request和Response对象内部,会将传递的请求头对象,转换为Headers
Headers对象中的方法:
- has(key):检查请求头中是否存在指定的key值
- get(key): 得到请求头中对应的key值
- set(key, value):修改对应的键值对
- append(key, value):添加对应的键值对
- keys(): 得到所有的请求头键的集合
- values(): 得到所有的请求头中的值的集合
- entries(): 得到所有请求头中的键值对的集合
let req;
function getRequestInfo() {
if (!req) { // 没有的话会新创建一个Request对象
const url="http://101.132.72.36:5100/api/local";
const headers = new Header({ //创建请求头对象
a : 1,
b : 2
})
req = new Request(url, {
headers
});
console.log(req.headers.has('a')); // 查看请求头里是否有a
console.log(req.headers.get('a')); // 获取请求头里是a的值,如果没有会返回 null
headers.set("a", 2); //修改a的值为2
headers.set("c", 3); //修改的是一个不存在的(c),它会在请求头新增一个键值对;
headers.append("a", 3); // 添加对应键值对,如果已经有了,会多加一个值,用逗号分隔;
//const datas = headers.entries();
//for (const pair of datas) {
// console。log(d); //得到所有请求头中的键值对的集合
// }
function printHeaders(headers) {
const datas = headers.entries();
for (const pair of datas) {
console.log(`key: ${pair[0]},value: ${pair[1]}`); 得到所有请求头中的键值对的集合
}
}
printHeaders(headers);
}
return req.clone(); //克隆一个全新的request对象,配置一致
}
async function getProvinces() {
const resp = await fetch(getRequestInfo())
printHeaders(resp.headers); //查看响应对象里的headers对应的键值对数据;
const result = await resp.json();
console.log(result)
}
getProvinces();
6. 文件上传
流程:
- 客户端将文件数据发送给服务器
- 服务器保存上传的文件数据到服务器端
- 服务器响应给客户端一个文件访问地址
测试地址:http://101.132.72.36:5100/api/upload
键的名称(表单域名称):imagefile
请求方法:POST
请求的表单格式:multipart/form-data
请求体中必须包含一个键值对,键的名称是服务器要求的名称,值是文件数据
HTML5中,JS仍然无法随意的获取文件数据,但是可以获取到input元素中,被用户选中的文件数据
可以利用HTML5提供的FormData构造函数来创建请求体
<img src="" alt="" id="imgAvatar">
<input type="file" id="avatar">
<button>上传</button>
async function upload() {
const inp = document.getElementById("avatar");
if (inp.files.length === 0) {
alert("请选择要上传的文件");
return;
}
const formData = new FormData(); //构建请求体
formData.append("imagefile", inp.files[0]);
const url = "http://101.132.72.36:5100/api/upload"
const resp = await fetch(url, {
method: "POST",
body: formData //自动修改请求头
});
const result = await resp.json();
return result;
}
document.querySelector("button").onclick = async function() {
const result = await upload();
const img = document.getElementById("imgAvatar")
img.src = result.path;
}