# ajax

没错，就是那个ajax


沧海一声笑🤣🤣🤣    
喵喵喵喵喵🐶🐶🐶

### Demo

## 测试 cache 方法示例

### 模拟 window.http 方法

```typescript
// 在测试环境中模拟 window.http
(window as any).http = {
    get: <T = any>(path: string, data?: any) => {
        return Promise.resolve({
            code: 200,
            msg: 'success',
            data: { id: 1, name: '测试数据' } as T,
            tid: 'test-tid'
        })
    },
    post: <T = any>(path: string, data?: any) => {
        return Promise.resolve({
            code: 200,
            msg: 'success',
            data: { id: 1, name: '测试数据' } as T,
            tid: 'test-tid'
        })
    }
}
```

### 使用 cache 方法

```typescript
import { ajax } from '../../utils/ajax'

// 示例 1: 使用 postList 的 cache 方法
interface User {
    id: number
    name: string
    email: string
}

// 第一次调用：会发起真实请求并缓存结果
ajax.postList<User>('/api/users', { page: 1 }).cache((users) => {
    console.log('从缓存或请求获取的用户列表:这里会打印两次', users)
    // users 类型为 any[]，可以直接使用
    users.forEach(user => {
        console.log(user.name)
    })
}).then((users) => {
    // 这里result拿到上一个cache调用链的返回结果
    console.log('请求完成后的用户列表:', users)
})

// 第二次调用（短时间内）：如果缓存未过期，会直接使用缓存数据
ajax.postList<User>('/api/users', { page: 1 }).cache((users) => {
    console.log('这次可能从缓存获取:这里会打印两次', users)
})

// 示例 2: 使用 post 的 cache 方法
ajax.post<{ token: string }>('/api/login', { username: 'test', password: '123' })
    .cache((result) => {
        console.log('登录结果（可能来自缓存）这里会打印两次:', result)
        // result 类型为 any，可以直接使用
        if (result.token) {
            localStorage.setItem('token', result.token)
        }
        return result
    })
    .then((result) => {
        // 这里result拿到上一个cache调用链的返回结果
        console.log('登录完成:', result)
    })

// 示例 3: 使用 get 的 cache 方法
ajax.get<{ count: number }>('/api/statistics')
    .cache((data) => {
        console.log('统计数据（可能来自缓存）这里会打印两次:', data)
    })
    .then((data) => {
        // 这里result拿到上一个cache调用链的返回结果
        console.log('统计数据:', data.count)
    })
```

### cache 方法说明

- `cache` 方法类似于 `then`，但会先检查 localStorage 中是否有缓存
- 如果缓存存在且未过期（默认 7 天），会立即调用回调函数并传入缓存数据
- 无论是否有缓存，都会执行实际的网络请求，并将最新结果更新到缓存
- 缓存 key 基于：方法名、路径、参数（JSON.stringify 序列化）
- `cache` 回调函数的参数类型为 `any`，方便直接使用


### clean方法
清除该请求的缓存，然后正常进行请求