适配器
适配器模式使 wl-request 可以支持多种 HTTP 客户端。
内置适配器
Fetch 适配器
默认适配器,基于浏览器原生 fetch API。
typescript
import { createRequest } from '@wl-request/core'
// 创建请求实例(使用默认的 Fetch 适配器)
const request = createRequest({
url: '/api/users',
method: 'GET',
baseURL: 'https://api.example.com'
})
// 发送请求
async function loadData() {
const response = await request.send()
console.log('数据:', response.data)
}
loadData()Axios 适配器
支持使用 axios 作为底层 HTTP 客户端。
typescript
import { registerAdapter, setDefaultAdapter } from '@wl-request/core'
import { AxiosAdapter } from '@wl-request/adapter-axios'
// 创建适配器实例
const axiosAdapter = new AxiosAdapter()
// 注册适配器
registerAdapter('axios', axiosAdapter)
// 设置为默认适配器
setDefaultAdapter(axiosAdapter)切换适配器
全局切换
typescript
import { setDefaultAdapter } from '@wl-request/core'
import { AxiosAdapter } from '@wl-request/adapter-axios'
setDefaultAdapter(new AxiosAdapter())实例级切换
typescript
import { createRequest } from '@wl-request/core'
import { AxiosAdapter } from '@wl-request/adapter-axios'
// 创建请求实例并指定适配器
const request = createRequest({
url: '/api/users',
method: 'GET',
adapter: new AxiosAdapter(),
baseURL: 'https://api.example.com'
})
// 发送请求
async function loadData() {
const response = await request.send()
console.log('数据:', response.data)
}
loadData()缓存适配器
LocalStorage 适配器
内置的 localStorage 缓存适配器。支持自定义缓存键前缀。
构造函数参数:
prefix:缓存键前缀,默认为 'wl-request:'
typescript
import { createRequest, LocalStorageCacheAdapter } from '@wl-request/core'
// 使用默认前缀
const request1 = createRequest({
url: '/api/users',
method: 'GET',
baseURL: 'https://api.example.com',
cache: {
ttl: 60000,
key: 'users',
cacheAdapter: new LocalStorageCacheAdapter()
}
})
// 使用自定义前缀(用于多实例隔离)
const request2 = createRequest({
url: '/api/posts',
method: 'GET',
baseURL: 'https://api.example.com',
cache: {
ttl: 60000,
key: 'posts',
cacheAdapter: new LocalStorageCacheAdapter('my-app:')
}
})
// 发送请求
async function loadData() {
const response = await request1.send()
console.log('数据:', response.data)
}
loadData()Memory 适配器
内存缓存适配器,适用于临时缓存。
typescript
import { createRequest } from '@wl-request/core'
import { MemoryCacheAdapter } from '@wl-request/cache-adapter-memory'
// 创建请求实例并使用 Memory 缓存适配器
const request = createRequest({
url: '/api/users',
method: 'GET',
baseURL: 'https://api.example.com',
cache: {
ttl: 60000,
key: 'users',
cacheAdapter: new MemoryCacheAdapter()
}
})
// 发送请求
async function loadData() {
const response = await request.send()
console.log('数据:', response.data)
}
loadData()配置选项:
typescript
new MemoryCacheAdapter({ maxEntries: 100 }) // 限制最多缓存 100 个条目
new MemoryCacheAdapter() // 无限制maxEntries:最大缓存条目数,超过时淘汰最早添加的项(LRU 策略)
INFO
淘汰策略说明: 当缓存数量超过 maxEntries 时,会删除 最早添加(最旧)的条目, 这是标准的 LRU(Least Recently Used)策略。访问缓存时会更新其访问顺序, 保留最近使用的项,淘汰最久未使用的项。
IndexedDB 适配器
IndexedDB 缓存适配器,适用于大数据量缓存。
构造函数参数:
dbName:数据库名称,默认为 'wl-request-cache'storeName:对象存储名称,默认为 'cache'
typescript
import { createRequest } from '@wl-request/core'
import { IndexedDBCacheAdapter } from '@wl-request/cache-adapter-indexeddb'
// 创建 IndexedDB 缓存适配器(使用默认值)
// const cacheAdapter = new IndexedDBCacheAdapter('my-cache-db')
// 或自定义数据库名称和对象存储名称
const cacheAdapter = new IndexedDBCacheAdapter('my-cache-db', 'cache')
// 创建请求实例并使用 IndexedDB 缓存适配器
const request = createRequest({
url: '/api/users',
method: 'GET',
baseURL: 'https://api.example.com',
cache: {
ttl: 60000,
key: 'users',
cacheAdapter
}
})
// 发送请求
async function loadData() {
const response = await request.send()
console.log('数据:', response.data)
}
// 加载数据
loadData()自定义适配器
实现请求适配器
typescript
import type { RequestAdapter, RequestConfig, Response } from '@wl-request/core'
class CustomAdapter implements RequestAdapter {
async request<T>(config: RequestConfig): Promise<Response<T>> {
// 实现自定义请求逻辑
const response = await fetch(config.url, {
method: config.method,
headers: config.headers,
body: config.data ? JSON.stringify(config.data) : undefined
})
return {
data: await response.json(),
status: response.status,
statusText: response.statusText,
headers: Object.fromEntries(response.headers.entries())
}
}
}
// 注册自定义适配器
registerAdapter('custom', new CustomAdapter())实现缓存适配器
typescript
import type { CacheAdapter } from '@wl-request/core'
class CustomCacheAdapter implements CacheAdapter {
async get<T = unknown>(key: string): Promise<T | null> {
// 从缓存获取数据
return null
}
async set<T = unknown>(key: string, value: T, ttl?: number): Promise<void> {
// 存储数据到缓存
}
async delete(key: string): Promise<void> {
// 删除缓存数据
}
async clear(): Promise<void> {
// 清空所有缓存
}
async has(key: string): Promise<boolean> {
// 检查缓存是否存在
return false
}
async cleanup(): Promise<void> { // 新增方法
// 主动清理所有已过期的缓存项
// 可选实现,但推荐实现以提高性能
}
}适配器管理
获取适配器
typescript
import { getAdapter } from '@wl-request/core'
const adapter = getAdapter('axios')
if (adapter) {
// 使用适配器
}重置适配器
typescript
import { resetAdapters } from '@wl-request/core'
// 重置为默认适配器
resetAdapters()