HTML5 API fetch详解(如有细节纰漏, 欢迎指正)
2025-01-29
Fetch API
回顾一下XMLHttpRequest的问题
- 所有的功能全部集中在一个对象上, 容易书写出混乱而且不容易维护的代码
- 采用传统的事件驱动模式, 无法适配新的 Promise api
Fetch Api的特点
- 并非取代ajax, 而是对ajax传统api的改进
- 精细的功能分割: 头部信息, 请求信息, 响应信息等均分布到不同的对象, 更利于处理各种复杂的ajax场景
- 使用Promise api, 更利于异步代码的书写
- fetch属于web api, 理所当然只能在浏览器端运行
Fetch Api的基本使用
参数
该函数有两个参数:
- 必填: 字符串, 对应的是请求地址
//请求数据的函数如下
const getDefaultData = () => {
//在论坛中我找到了一个请求网易云音乐别人已经写好的接口,可以用来测试
const url = 'https://api.imjad.cn/cloudmusic/?type=song&id=32785674';
fetch(url);
}
// 假设我们的html页面中有一个按钮, 点击这个按钮就会开始请求数据,然后我们现在获取到这个按钮
const btn = document.querySelector('button');
btn.onclick = () => {
getDefaultData();
}
当上面的代码写好, 我们进行点击操作时, 服务器相应的给我们返回了数据
请求配置对象(红色为比较常用的, 绿色为目前不太常用的)
- method: 字符串, 请求方法, 默认值GET
- headers: 对象, 请求头信息
- body: 请求体的内容, 必须匹配请求头中Content-Type
- mode:字符串, 请求模式
- cors: 默认值, 配置为该值, 会在请求头中加入origin和referer
- no-cors: 配置为该值, 将不会再请求头中加入origin和referer, 跨域的时候可能会出现问题
- same-origin: 配置为该值, 则指示请求必须在同一个域中发生, 如果请求其他域, 则会报错
- credentials: 如何携带凭据
- omit: 默认值, 不携带cookie
- same-origin: 请求同源地址时携带cookie
-include: 请求任何地址都要携带cookie
- omit: 默认值, 不携带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请求不顾一切的依赖缓存, 即使缓存过期了, 他依然从缓存中读取, 如果没有任何缓存, 那么他将抛出一个错误
//配置对象书写
const getData = function() {
const url = 'xxx/api';
const config = {
method: 'POST', // 写请求方法
headers: {
// 配置请求头
//例如: "Content-Type": 'application/json'
},
body: {
// 配置请求体, 比如POST请求要传递的数据
}
//...其他不常用配置
}
fetch(url, config);