TypeScript 实战：封装 Axios 和 带过期时间的 LocalStorage 的完整指南

增强 TypeScript 应用：封装 Axios 和带过期时间 LocalStorage 的指南

1. 封装 Axios

使用 TypeScript 构建 web 应用时，Axios 是一个强大的 HTTP 请求库。为了简化其使用，我们可以创建一个封装的 Axios 实例，称为 httpClient。

封装步骤：

import axios from "axios";

export const httpClient = axios.create({
  baseURL: "YOUR_BASE_URL",
  headers: {
    "Content-Type": "application/json",
  },
  withCredentials: true, // 允许跨域请求
});

2. 带过期时间 LocalStorage

LocalStorage 允许存储键值对，但有时我们需要数据在特定时间后自动删除。为此，我们可以创建一个 LocalStorageWithExpiry 类：

class LocalStorageWithExpiry {
  setItemWithExpiry(key: string, value: any, expiryTime: number) {
    const item = {
      value,
      expiry: Date.now() + expiryTime,
    };

    localStorage.setItem(key, JSON.stringify(item));
  }

  getItemWithExpiry(key: string) {
    const item = JSON.parse(localStorage.getItem(key));

    if (!item) {
      return null;
    } else if (item.expiry < Date.now()) {
      localStorage.removeItem(key);
      return null;
    } else {
      return item.value;
    }
  }
}

const localStorageWithExpiry = new LocalStorageWithExpiry();

3. 应用场景

封装的 Axios 和带过期时间 LocalStorage 在以下场景中非常有用：

• 购物车： 在电商应用中存储购物车物品，但超时后自动删除。
• 会话管理： 保持用户登录状态，但在一段时间不活动后自动注销。
• 缓存数据： 存储网站数据以提高加载速度，但在过期后自动删除以保持信息最新。

4. 结论

本指南介绍了如何封装 Axios 和实现带过期时间 LocalStorage，这将增强 TypeScript 应用的持久性。通过利用这些技术，你可以构建更加强大且易于维护的 web 应用。

5. 常见问题解答

• 如何设置 LocalStorage 中数据的过期时间？

  • 使用 setItemWithExpiry(key, value, expiryTime) 方法，其中 expiryTime 以毫秒为单位指定过期时间。

• 如何从 LocalStorage 中获取带过期时间的数据？

  • 使用 getItemWithExpiry(key) 方法，它会检查数据是否过期，并在过期时将其删除。

• 我可以在哪里找到封装的 Axios 实例？

  • 在本文的代码示例中，封装的 Axios 实例名为 httpClient。

• 带过期时间 LocalStorage 如何处理已过期的项目？

  • 它会在 getItemWithExpiry 方法中检测到过期项目，并将其从 LocalStorage 中自动删除。

• 如何使用封装的 Axios 进行 HTTP 请求？

  • 使用封装的 Axios 实例 httpClient，就像使用 Axios 库一样进行 HTTP 请求。