/**
 * 创建一个可取消的异步任务包装器
 * @param fn 需要被包装的异步函数
 * @returns 返回一个对象， 包含一个 cancel 方法和一个 run 方法
 */
export function createCancelableTask(fn: any) {
    // 定义一个空操作函数，用于重置 resolve 和 reject
    const NOOP = () => { }
    // 初始化取消函数
    let cancel = NOOP

    return {
        // 提供取消当前任务的方法
        cancel: () => cancel(),
        // 执行异步任务的方法，接收与原函数相同的参数
        run: (...args: any[]) => {
            return new Promise((resolve, reject) => {
                // 如果有正在执行的任务，先取消它
                cancel()
                // 重新定义取消函数，将 resolve 和 reject 重置为空操作
                cancel = () => (resolve = reject = NOOP)

                fn(...args)
                    .then(
                        (res: any) => resolve(res), // 当 fn 执行成功时，调用 resolve
                        (err: any) => reject(err), // 当 fn 执行失败时，调用 reject
                    )
            })
        }
    }
}
// 测试用例
console.log("开始防竞态请求测试...");

const { run, cancel } = createCancelableTask(async (num: number) => {
    console.log(`开始请求 ${num}`);
    await new Promise(resolve => setTimeout(resolve, 1000));
    console.log(`请求 ${num} 完成`);
    return `结果 ${num}`;
});

// 连续发送三个请求
run(1).then(result => {
    console.log(`请求1结果: ${result}`);
}).catch(err => {
    console.log(`请求1被取消`);
});

run(2).then(result => {
    console.log(`请求2结果: ${result}`);
}).catch(err => {
    console.log(`请求2被取消`);
});

run(3).then(result => {
    console.log(`请求3结果: ${result}`);
}).catch(err => {
    console.log(`请求3被取消`);
});

console.log("注意: 只有最后一个请求(请求3)会成功完成，前两个会被自动取消");
// 开始防竞态请求测试...
// App.vue:36 开始请求 1
// App.vue:36 开始请求 2
// App.vue:36 开始请求 3
// App.vue:61 注意: 只有最后一个请求(请求3)会成功完成，前两个会被自动取消
// App.vue:38 请求 1 完成
// App.vue:38 请求 2 完成
// App.vue:38 请求 3 完成
// App.vue:56 请求3结果: 结果 3

/**
 * 假设我们要上传一个20GB的大文件，将其分成100个10MB的分片。如果不使用任务调度器，同时发起100个上传请求会导致以下问题： 
 * 1.浏览器的并发请求数量被占满 
 * 2.其他正常业务请求可能无法及时发送 
 * 3.服务器压力过大 
 * 4.网络带宽被占满
 * 那么这个问题我们应该如何解决呢？
 * 我们可以尝试着将所有的任务，都放到一个队列里面去，
 * 这样我们每次最多发送两个请求，如果有一个请求发送完成，那么我们再从这个队列里面取出一个发送请求，
 * 我们只需要保证同时发送的请求不超过两个，这样就可以保证并发数量不被占满，也不会占用过多的带宽，下面我们来实现这个功能
 */

/**
 * 任务调度器类
 * 用于控制并发任务的执行数量
 * 实现了任务队列和并发限制的功能
 */
export class TaskScheduler {
    // 存储待执行的任务队列
    tasks: any[] = []
    // 当前正在执行的任务数量
    runningCount = 0
    // 最大并发限制数
    limit: number

    constructor(limit: number) {
        this.limit = limit
    }

    /**
     * 执行任务
     * 检查是否可以执行新的任务，并从任务队列中取出任务执行
     * 任务执行完成后会检查队列中是否还有待执行的任务，如果有则继续执行
     */
    run() {
        if (this.runningCount >= this.limit || this.tasks.length <= 0) {
            // 如果当前运行的任务数达到上限或者任务队列为空，则不执行新任务
            return
        }
        this.runningCount++
        // 从队列头部取出一个任务
        const task = this.tasks.shift()
        // 执行任务，任务执行完成后递归执行 run 函数
        task().finally(() => {
            // 减少运行中的任务计数
            this.runningCount--
            // 检查是否还有任务可以执行
            this.run()
        })
    }

    /**
     * 添加新任务到调度器
     * @param task - 要执行的任务函数，必须返回 Promise
     * @returns - 返回一个 Promise，当任务执行完成时 resolve
     */
    addTask(task: any) {
        return new Promise((...args: any[]) => {
            // 将任务包装后添加到队列
            this.tasks.push(() => task().then(...args))
            // 立即执行任务
            this.run()
        })
    }
}

//创建一个最大并发数为2的调度器实例
const scheduler = new TaskScheduler(2)
// 创建一个延迟函数
function delay(time: number) {
    return new Promise(resolve => setTimeout(resolve, time))
}
// 开始计时
console.time('分片1')
console.time('分片2')
console.time('分片3')
console.time('分片4')
console.time('分片5')

// 添加5个任务到调度器
// 由于并发限制为2，这些任务会分批执行：
// 第一批：分片1和2同时执行，1秒后完成
// 第二批：分片3和4同时执行，2秒后完成
// 第三批：分片5单独执行，3秒后完成
scheduler.addTask(() => delay(1000).then(() => console.timeEnd('分片1'))) // 1秒后输出分片1
scheduler.addTask(() => delay(1000).then(() => console.timeEnd('分片2'))) // 1秒后输出分片2
scheduler.addTask(() => delay(2000).then(() => console.timeEnd('分片3'))) // 2秒后输出分片3
scheduler.addTask(() => delay(2000).then(() => console.timeEnd('分片4'))) // 2秒后输出分片4
scheduler.addTask(() => delay(3000).then(() => console.timeEnd('分片5'))) // 3秒后输出分片5
// 打印
// 分片1: 1017.328857421875 ms
// 分片2: 1017.73486328125 ms
// 分片3: 3029.158935546875 ms
// 分片4: 3029.530029296875 ms
// 分片5: 6035.072021484375 ms

export function defaultGenKey(options: any) {
    return JSON.stringify(options)
}
// `createCacheRequest`是一个高阶函数，用于为异步请求创建一个临时的缓存层。
// 它可以在指定的时间内缓存相同的请求结果，从而避免重复请求，提高应用性能。
export function createCacheRequest<T = any>(fn: (...args: T[]) => Promise<T> | any, ms: number = 0, generatorKey = defaultGenKey) {
    const map: Record<string, Promise<any>> = {}
    return (...args: T[]) => {
        // 生成唯一key,如果用户没有传递，则使用 JSON.stringify 进行序列化
        const key = generatorKey(args)
        // 如果缓存中存在则直接返回，否则执行函数并缓存结果，最后在指定时间后删除缓存
        return (map[key] ??= fn(...args)).finally(() => {
            setTimeout(() => delete map[key], ms)
        })
    }
}
// 测试用例
const mockApi = (arg: any) => {
    console.log('执行API调用，参数:', arg);
    return Promise.resolve(`结果: ${arg}`);
};

const cachedRequest = createCacheRequest(mockApi, 1000);

console.log('=== 第一次调用 ===');
cachedRequest('test').then(result => console.log('第一次结果:', result));

console.log('=== 第二次相同参数调用 ===');
cachedRequest('test').then(result => console.log('第二次结果:', result));

console.log('=== 第三次不同参数调用 ===');
cachedRequest('other').then(result => console.log('第三次结果:', result));

setTimeout(() => {
    console.log('=== 1秒后再次调用相同参数 ===');
    cachedRequest('test').then(result => console.log('第四次结果:', result));
}, 1500);

// === 第一次调用 ===
// 执行API调用，参数: test
// === 第二次相同参数调用 ===
// === 第三次不同参数调用 ===
// 执行API调用，参数: other
// 第一次结果: 结果: test
// 第二次结果: 结果: test
// 第三次结果: 结果: other
// === 1秒后再次调用相同参数 ===
// 执行API调用，参数: test
// 第四次结果: 结果: test