Fetch 和 Cache

简介: fetch 是浏览器提供的一个用于发起网络请求的 API,是 XMLHttpRequest 的替代方案,fetch 本身自带 Promise 属性,支持现代化的异步方案。

Fetch


fetch 是浏览器提供的一个用于发起网络请求的 API,是 XMLHttpRequest 的替代方案,fetch 本身自带 Promise 属性,支持现代化的异步方案。

1682520963(1).png

但是注意,📢,虽然 fetch 返回值是 Promise,但是 HTTP 响应的异常状态(404, 502……非 200 状态段)并不会标记为 reject,而是 resolve 一个 false 值,只有在网络请求失败时才会标记为 reject。

在fetch出现之前我们经常会使用基于 XHR 封装的 axios,现在 fetch 补全了浏览器请求的短板,我们可以使用 fetch 来做为请求工具,我们可以基于 fetch 来做一个封装。

const initialHeaders = {
  'Content-Type': 'application/json',
}
/**
 * 
 * @param {string} method 请求方法
 * @param {string} url 请求地址
 * @param {string} body  请求数据
 * @Param {Headers} headers 请求头
 */
async function request(method, url, body, headers = initialHeaders) {
  // 请求拦截
  const response = await fetch(url, {
    method,
    headers,
    body
  })
  // 响应拦截
  if (response.status > 299) {
    // error fix
  }
  return response.json()
}
function get(url, params = {}) {
  return request('GET', `${url}?${getQueryString(params)}`)
}
function post(url, body = {}) {
  return request('POST', url, JSON.stringify(body))
}
function getQueryString(queryObj) {
  return Object.keys(queryObj)
    .map((key) => {
      const value = queryObj[key];
      return `${key}=${value}`;
    })
    .join('&');
}
复制代码

Headers

这里的 headers 直接用对象的形式写入的,其实 Fetch API 还提供了Header 构造器,很不方便但是有些功能限制在 ServiceWorker 中使用。

const initialHeaders = Headers.Headers({
  'Content-Type': 'application/json',
})
initialHeaders.set('Authorization', 'xxxx')
initialHeaders.append('Content-Type', 'charset=utf-8')
initialHeaders.get('Accept')
initialHeaders.has('Accept')
复制代码
  • append:给 header 添加一个值或者添加一个不存在的 header 并赋值;
  • delete:从 Headers 对象中删除指定 header;
  • entries:返回 Headers 对象中所有的键值对;
  • get:从 Headers 对象中返回指定 header 的全部值;
  • has:从 Headers 对象中返回是否存在指定的 header;
  • keys:返回 Headers 对象中所有存在的 header 名;
  • set:替换现有的 header 的值,或者添加一个未存在的 header 并赋值;
  • values:返回 Headers 对象中所有存在的 header 的值。

set 和 append 的区别在于,set 会覆盖之前的值,append 会在原有的值后追加;

例如

content-type: application/javascript; charset=utf-8

可以通过 append 添加两段或者直接用 set 添加一段

headers.set('content-type', 'application/javascript; charset=utf-8')

headers.append('Content-Type', 'application/javascript')

headers.append('Content-Type', 'charset=utf-8')

Request & Response

featch 的第一个参数可以是 Request 类型,也可已通过构造函数创建,参数就是 fetch 的参数,但是基本上不会手动创建。

fetch 的返回值是一个 Response 类型的对象,response最常见的属性有:

status:HTTP 的状态码;

statusText:和 status 对应的文本;

body:响应体;

一般 fetch 用于请求 json 数据,可以通过 json 方法将返回结果解析为 json,该方法是一个异步方法,返回结果是一个 Promise 对象。除此之外可以使用 text 将结果解析为文本,使用 blob 方法将结果解析问 Blob 文件流,结果均为 Promise 对象。

使用 clone 方法可以克隆一个响应体,本体和克隆体完全一致,但是存储在不同的变量中,Request 同样支持 clone。

中断请求

axios 中支持中断请求,fetch 中同样支持,我们可以使用AbortController来中断 Web 请求。

fetch 的参数中支持传入一个 single,只需要要将 AbortController 对象的single 属性传入,即可使用该AbortController 的 abort 方法来中断这个请求。

let controller;
function fetchFile(url) {
  controller = new AbortController()
  const single = controller.signal
  fetch(url, {
    single
  }).then(res => {
    console.log('下载成功')
    return res
  })
}
function stop() {
  if (controller) {
    controller.abort()
    console.log('下载中止')
  }
}
复制代码


Cache


Cache API 是用于缓存的 API,目前的浏览器支持也算是比较完全

1682520991(1).png

Cache 为 Request 和 Response 对象提供了存储机制,最常用的场景是在 ServiceWorker 中使用,虽然Cache 是 ServiceWorker 标准中的,但是 Cache 并不是限制在 ServiceWorker 中使用。

但是,Cache 只限制在 HTTPS 环境下使用。

在使用缓存之前需要使用 CacheStorage(使用 caches 访问) 的 open 方法打开一个命名空间,返回值是一个 Promise 对象,resolve的结果是 cache 缓存对象,同一个域名下可以有多个缓存对象。

caches 有以下方法:

  • match:【request, options】检查指定的 request 是否是 cache 对象的键,返回一个resolve 为该匹配的Promise对象;
  • has:【cacheName】如果存在 cacheName 的缓存对象则返回一个 Promise对象,resolve 的值为 true,否则为 false;
  • open:【cacheName】返回与 cacheName 匹配的 cache 对象(Promise),如果不存在则创建一个缓存对象并返回;
  • delete:【cacheName】删除与指定cacheName 匹配的 cache 对象,删除成功返回一个 Promise对象,resolve 值为 true,否则为 false;
  • keys:返回caches 所有命名组成的数组。

cache 实例上有以下方法:

  • match:【request, options】返回一个 Promise对象,resolve 的结果是跟 Cache 对象匹配的第一个缓存请求;
  • matchAll:【request, options】返回一个 Promise对象,resolve 的结果是跟 Cache 对象匹配的缓存请求数组;
  • add:【request】抓取一个 url,然后将相应进行缓存
  • addAll:【requests】抓取一个url 数组,然后将返回的 response 缓存
  • put:【request, response】同时抓取一个 request 和 response 进行缓存
  • delete:【request, options】删除 key 为 request 的缓存,返回结果是一个 Promise 对象,删除成功 resolve 的值为 true,如果没有找到 resolve 的值为 false;
  • keys:【request, options】返回一个 Promise对象,resolve 的值为 Cache key组成的数组,如果指定了 request则返回对应的Request

具体的使用案例之前在 ServiceWorker 那一篇中已经写过了。

相关文章
|
4月前
|
API 监控 双11
淘宝/天猫获取商品历史价格信息 API 返回值的应用
本内容介绍了一款基于API的工具的核心功能,涵盖消费者决策支持、商家运营优化、市场趋势分析及数据服务拓展四大方面。消费者可借助历史价格曲线判断价格合理性、选择最佳购买时机;商家可通过竞品数据分析优化定价策略与促销活动;第三方平台能监测价格波动、跟踪竞品动态以洞察市场趋势。此外,工具还支持比价工具开发与价格预警服务,为用户和企业带来全方位的价格智能解决方案。
vue2项目使用?.语法报错如何解决?(@babel/plugin-proposal-optional-chaining)
vue2项目使用?.语法报错如何解决?(@babel/plugin-proposal-optional-chaining)
854 0
|
前端开发 JavaScript 开发者
CSS进阶-过渡与动画的事件监听
【6月更文挑战第16天】**CSS过渡和动画事件增强交互性,但监听与控制需谨慎。了解`transitionend`用于CSS过渡结束时的响应,避免过度使用JavaScript检测变化。示例代码展示如何绑定`transitionend`事件并在结束后执行操作。对于CSS动画,理解`animationstart`, `animationiteration`, `animationend`事件的生命周期至关重要,确保在动画结束后进行适当的清理。通过这些技巧,优化用户体验并提高代码效率。**
173 5
|
11月前
|
网络安全 Docker CDN
使用Certimate自动申请与部署SSL证书
Certimate 是一个开源的 SSL 证书管理工具,可帮助自动申请、部署 SSL 证书并自动续期。
1091 0
使用Certimate自动申请与部署SSL证书
|
数据采集
基于R语言的GD库实现地理探测器并自动将连续变量转为类别变量
【9月更文挑战第9天】在R语言中,可通过`gd`包实现地理探测器。首先,安装并加载`gd`包;其次,准备包含地理与因变量的数据框;然后,使用`cut`函数将连续变量转换为分类变量;最后,通过`gd`函数运行地理探测器,并打印结果以获取q值等统计信息。实际应用时需根据数据特点调整参数。
481 8
|
存储 弹性计算 固态存储
阿里云服务器可选云盘ESSD AutoPL、ESSD云盘、SSD云盘区别参考
目前阿里云服务器的云盘有ESSD AutoPL、高效云盘、ESSD云盘、SSD云盘等可供选择,有的新手用户并不清楚他们之间的区别,因此也就不知道应该如何选择,因为不同种类的云盘在最大IOPS、最大吞吐量等性能上是有区别的,下面我们一起来他们之间的区别,这样就有助于我们选择适合自己需求的系统盘与数据盘了。
阿里云服务器可选云盘ESSD AutoPL、ESSD云盘、SSD云盘区别参考
|
消息中间件 安全 Java
解密 Java 后台架构设计之道
【4月更文挑战第5天】本文探讨了Java后台架构设计的最佳实践,包括分层架构、微服务、异步处理与消息队列、RESTful API设计、数据库优化、安全控制、容错高可用、配置管理、CI/CD和监控日志。强调了使用微服务、Spring Boot/Spring Cloud、异步消息队列、RESTful API、安全框架Spring Security等技术的重要性,以及监控和自动化部署在确保系统稳定性和效率上的关键角色。通过这些实践,开发者能构建高效、稳定且可扩展的后台系统。
519 9
|
前端开发
React 如何导出excel
React 如何导出excel
315 0
|
Oracle 固态存储 NoSQL
阿里云服务器ESSD云盘性能级别PL0、PL1、PL2和PL3区别参考
阿里云ESSD云盘分为PL0、PL1、PL2和PL3四种性能级别,ESSD云盘PL性能级别不同单盘IOPS性能上限也不同,ESSD云盘容量大小不同可选性能级别不同,阿里云百科来详细说下阿里云服务器ESSD云盘性能级别及对应的单盘IOPS性能上限说明:
821 1
|
编解码 人工智能 自然语言处理
ModelScope体验人像卡通化模型
该任务采用一种全新的域校准图像翻译模型DCT-Net(Domain-Calibrated Translation),利用小样本的风格数据,即可得到高保真、强鲁棒、易拓展的人像风格转换模型,并通过端到端推理快速得到风格转换结果。
1226 94

热门文章

最新文章