LocalStorage的二次封装

LocalStorage进行二次封装后,可以优化性能,减少请求。下面是我用ts封装的localStorage和sessionStorage,具有通用性。 

//具有通用性,进行封装localStorage,sessionStorage
enum CacheType {
  Local,
  Session
}
class Cache {
  storage: Storage
  constructor(type: CacheType) {
    this.storage = type === CacheType.Local ? localStorage : sessionStorage
  }
  //封装
  setCache(key: string, value: any) {
    if (value) {
      this.storage.setItem(key, JSON.stringify(value))
    }
  }
  getCache(key: string) {
    const value = this.storage.getItem(key)
    if (value) {
      return JSON.parse(value)
    }
  }
  deleteCache(key: string) {
    this.storage.removeItem(key)
  }
  clearCache() {
    this.storage.clear()
  }
}
const localCache = new Cache(CacheType.Local)
const sessionCache = new Cache(CacheType.Session)
export { localCache, sessionCache }

  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
axios是一种基于Promise的HTTP客户端,用于浏览器和Node.js。对于一些常见的HTTP请求操作(例如获取、添加、更新和删除数据),它提供了许多有用的功能。 二次封装axios可以更好地适应我们的项目需求,同时提高我们的开发效率。一般来说,我们需要对axios进行二次封装的原因有以下几点: 1. 统一处理请求异常,例如请求超时、网络错误等; 2. 统一处理请求头、请求参数等公共信息; 3. 根据具体的业务需求,进行请求的拦截和转换; 4. 统一处理响应数据,例如对响应数据进行统一的错误处理、响应数据格式化等。 下面是一个简单的二次封装axios的示例代码: ``` import axios from 'axios'; const request = axios.create({ baseURL: 'http://example.com/api', timeout: 5000 }); request.interceptors.request.use(config => { // 统一处理请求头、请求参数等公共信息 config.headers.Authorization = localStorage.getItem('token') || ''; return config; }, error => { // 统一处理请求异常 console.error(error); return Promise.reject(error); }); request.interceptors.response.use(response => { // 统一处理响应数据 const data = response.data; if (data.code !== 0) { console.error(data.message); return Promise.reject(data); } return data.result; }, error => { // 统一处理响应异常 console.error(error); return Promise.reject(error); }); export default request; ``` 上述代码中,我们首先使用`axios.create`方法创建了一个axios实例`request`,并通过`baseURL`和`timeout`属性设置了该实例的默认配置。接着,我们通过`request.interceptors.request.use`和`request.interceptors.response.use`分别定义了请求拦截器和响应拦截器。在这些拦截器中,我们可以对请求和响应数据进行各种处理,例如添加公共请求头、处理异常信息、格式化响应数据等。最后,我们将该实例导出,供项目中其他模块使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

进击中的大学生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值