首页 > 其他分享 >axios实现,在一个极短时间内,请求同一个接口,若传参完全一样,则使用浏览器中的缓存中的上次的值。同时,上次的值应该在指定时间内可以自动清除。请写一个axios适配器。实现上述功能

axios实现,在一个极短时间内,请求同一个接口,若传参完全一样,则使用浏览器中的缓存中的上次的值。同时,上次的值应该在指定时间内可以自动清除。请写一个axios适配器。实现上述功能

时间:2024-01-30 12:24:10浏览次数:29  
标签:缓存 const 适配器 接口 axios data 上次

axios实现,在一个极短时间内,请求同一个接口,若传参完全一样,则使用浏览器中的缓存中的上次的值。同时,上次的值应该在指定时间内可以自动清除。请写一个axios适配器。实现上述功能。

在axios中,我们可以利用浏览器的缓存机制(HTTP缓存)来实现这个需求。不过,浏览器的HTTP缓存主要依赖于服务器返回的Cache-Control等响应头信息,并不能完全按照指定时间自动清除。

但如果你想要在客户端实现一个简易版本的缓存适配器,可以使用内存缓存(如Map或对象)存储请求结果,并设置一个过期时间。

我们将适配器抽离出来作为一个单独的模块,并且通过axios实例配置的方式引入。以下是一个将缓存适配器独立封装的例子:

首先创建一个axiosCacheAdapter.js文件:

import axios from 'axios';

const cache = new Map();
const EXPIRATION_TIME_MS = 60 * 1000; // 缓存过期时间(例如:1分钟)

const cacheAdapterEnhancer = config => {
  const { url, method, params, data } = config;
  const cacheKey = JSON.stringify({ url, method, params, data });

  if (cache.has(cacheKey)) {
    const cachedResult = cache.get(cacheKey);
    if (Date.now() - cachedResult.timestamp < EXPIRATION_TIME_MS) {
      return Promise.resolve(cachedResult.data);
    } else {
      cache.delete(cacheKey);
    }
  }

  return axios.defaults.adapter(config).then((response) => {
    const cacheValue = {
      timestamp: Date.now(),
      data: response.data,
    };
    cache.set(cacheKey, cacheValue);

    return response;
  });
};

export default cacheAdapterEnhancer;

然后在主应用中引入并使用这个适配器:

import axios from 'axios';
import cacheAdapterEnhancer from './axiosCacheAdapter';

// 创建axios实例并配置缓存适配器
const instance = axios.create({
  adapter: cacheAdapterEnhancer,
});

// 使用自定义的axios实例发送请求
instance.get('/your-api-endpoint', { params: yourParams })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

这样就实现了适配器的解耦和复用,可以根据需要在不同的地方引入并配置给不同的axios实例。

在这种场景下为何使用的是叫适配器,为啥使用这种设计模式?

在这种场景下,我们虽然没有明确提到“适配器”这个词,但实际设计的机制确实体现了一种适配器模式的应用。
适配器模式(Adapter Pattern)是一种结构型设计模式,它允许将一个接口转换为客户希望的另一个接口,从而使原本不兼容的类可以协同工作。

在上述axios缓存适配器的例子中:

  1. 原始接口:这里的原始接口是axios提供的HTTP请求功能,它会直接与服务器进行交互以获取数据。
  2. 目标接口:目标接口是我们期望的行为,即当短时间内重复请求相同接口且参数相同时,从本地缓存而不是服务器获取数据。
  3. 适配器:创建的cacheAdapterEnhancer就是一个适配器,它接收axios原有的请求配置,并通过自定义逻辑来决定是否从缓存中返回数据还是发起实际网络请求。这个适配器将axios原始的接口行为适配成了包含缓存功能的新接口。

通过这种方式,我们无需修改axios库本身的代码,而是通过封装一个适配器,在不改变原有接口的基础上,为axios添加了新的缓存处理逻辑,从而实现了新旧系统之间的解耦和复用,这正是适配器模式的核心思想。

标签:缓存,const,适配器,接口,axios,data,上次
From: https://www.cnblogs.com/longmo666/p/17996836

相关文章

  • Vue中JSON文件神奇应用fetch、axios异步加载与模块导入全指南
     在Vue中使用JSON文件有多种方式,包括使用fetch方法加载JSON文件、使用axios库加载JSON文件,以及将JSON文件导入为模块。以下是详细描述和相应的示例代码:1.使用fetch方法加载JSON文件:步骤:创建一个JSON文件,例如 data.json://data.json{"name":"John","age":......
  • 2024年1月Java项目开发指南11:axios请求与接口统一管理
    axios中文网:https://www.axios-http.cn/安装npminstallaxios配置在src下创建apis文件夹创建axios.js文件配置如下://src/apis/axios.jsimportaxiosfrom'axios';//创建axios实例constservice=axios.create({baseURL:"http://127.0.0.1:8080",//api的ba......
  • uniapp-vue3,封装类似于axios的请求方法
    request.jsimport{rootUrl}from"@/config/app-config.js"importhandleCachefrom'@/utils/cache/cache.js';import{showToast}from"@/utils/vant"import{clearAccountInfo}from'@/utils/clear/clear';import......
  • 2024-1-25axios错误处理
    目录axios错误处理axios错误处理该错误是当时在POST案例出现的,当提交过一次用户后再次提交出现了报错。场景:再次注册相同的账号,会遇到错误信息处理:用更直观的方式,给普通用户展示错误信息错误处理固定格式语法:在then方法的后面,通过点语法调用catch方法,传入回调函数error并定......
  • 在TypeScript项目中搭配Axios封装后端接口调用
    前言本来是想发next.js开发笔记的,结果发现里面涉及了太多东西,还是拆分出来发吧~本文记录一下在TypeScript项目里封装axios的过程,之前在开发StarBlog-Admin的时候已经做了一次封装,不过那时是JavaScript,跟TypeScript还是有些区别的。另外我在跟着next.js文档开发的......
  • vue3 axios 封装
    一、介绍二、代码三、问题 一、介绍Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。这里介绍的是在vue3中怎么封装二、代码1.基本使用1.1安装npminstallaxios1.2简单使用1.2.1局部使用importaxiosfrom'axio......
  • npm ERR! request to https://registry.npm.taobao.org/axios failed, reason: certif
    前言一直使用npmbuild没问题的,突然出现报错:npmWARNinstallUsageofthe`--dev`optionisdeprecated.Use`--only=dev`instead.npmERR!codeCERT_HAS_EXPIREDnpmERR!errnoCERT_HAS_EXPIREDnpmERR!requesttohttps://registry.npm.taobao.org/axiosfailed,......
  • 将小部分源码设计精髓带入到开发中来(工厂模式、适配器模式、抽象类、监听器)
    前言咋说呢,大学期间阅读过很多源码(Aop、Mybatis、Ioc、SpringMvc…),刚开始看这些源码的时候觉得云里雾里,一个没什么代码量的人突然去接触这种商业帝国级别的成品源码的时候,根本无从下手,这种感觉很难受,但是也庆幸自己熬过了那段难忘且充实的日子,随着自己代码量的慢慢增多,也开始慢慢......
  • 适配器模式
    定义:将一个类的接口转换成客户期望的另一个接口,使原本接口不兼容的类可以一起工作类型:结构型适用场景:已经存在的类,它的方法和需求不匹配时(方法结果相同或相似)不是软件设计阶段考虑的设计模式,是随着软件维护,由于不同产品、不同厂家造成功能类似而接口不相同情况下的......
  • 模拟适配器设计方案:360-基于10G以太网的模拟适配器
     基于10G以太网的模拟适配器一、产品概述   基于10G以太网的模拟适配器是一款分布式高速数据采集系统,实现多路AD的数据采集,并通过10G以太网光纤远距离传输到存储计算服务器,计算控制指令能通过光纤返回给数据卡进行IO信号控制。产品基于10G太网络,可迅......