工作/面试中可能会遇到的工具函数

lodash isEqual 函数

`用于比较两个对象， 数组的值是不是完全一样， 安巽项目，在需要监听判断手动修改表单场景下才打标记。 而不是初始化回显值得时候就触发得watch。

`

const watchProps = computed(() => ({
  type: formData.value.type,
  account: formData.value.account,
  name: formData.value.name,
  account_type: formData.value.account_type,
  category: formData.value.category,
  belongs: formData.value.belongs
}));

watch(
  () => watchProps.value,
  (newVal) => {
    if (formData.value.id && !isEqual(newVal, initialData.value)) {// 比较是否跟初始化得数据一样
      //存在id的修改才算修改
      emit("updateFlag", { index: props.index, flag: 1 }); // 2表示修改受害人
    }
  },
  {
    immediate: false
  }
);

watch(
  () => props.data,
  (newVal) => {
    formData.value = newVal;
    initialData.value = { // 初始化得时候 提取要监听手动变化的属性
      type: newVal.type,
      account: newVal.account,
      name: newVal.name,
      account_type: newVal.account_type,
      category: newVal.category,
      belongs: newVal.belongs
    };
  },
  {
    deep: true,
    immediate: true
  }
);

/**
 * 创建一个防重复请求的工具函数
 * @param {Function} requestFn - 原始的请求函数
 * @returns {Function} - 包装后的防重复请求函数
 */
function createDeduplicatedRequest(requestFn) {
    // 用于存储正在进行的请求
    const pendingRequests = new Map();

    return async function (...args) {
        // 将参数转换为字符串作为缓存的key
        const key = JSON.stringify(args);

        // 如果已经有相同的请求正在进行，直接返回该请求的Promise
        if (pendingRequests.has(key)) {
            console.log('发现重复请求，复用已有请求');
            return pendingRequests.get(key);
        }

        console.log('发起新请求');
        // 创建新的请求Promise
        const requestPromise = requestFn(...args).finally(() => {
            // 请求完成后，从缓存中删除
            pendingRequests.delete(key);
        });

        // 将请求Promise存入缓存
        pendingRequests.set(key, requestPromise);

        return requestPromise;
    };
}

// 使用示例
async function fetchData(url, params) {
    // 模拟异步请求
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({ url, params, timestamp: Date.now() });
        }, 1000);
    });
}

// 创建防重复的请求函数
const deduplicatedFetch = createDeduplicatedRequest(fetchData);

// 测试代码
async function test() {
    console.log('开始测试并发请求...');
    
    // 模拟不同时间发起的请求
    console.log('发起请求1...');
    const request1 = deduplicatedFetch('https://api.example.com', { id: 1 });
    
    // 等待100ms后发起第二个请求
    await new Promise(resolve => setTimeout(resolve, 100));
    console.log('发起请求2...');
    const request2 = deduplicatedFetch('https://api.example.com', { id: 1 });
    
    // 再等待100ms后发起第三个请求
    await new Promise(resolve => setTimeout(resolve, 100));
    console.log('发起请求3...');
    const request3 = deduplicatedFetch('https://api.example.com', { id: 2 });
    
    // 再等待100ms后发起第四个请求
    await new Promise(resolve => setTimeout(resolve, 100));
    console.log('发起请求4...');
    const request4 = deduplicatedFetch('https://api.example.com', { id: 1 });

    // 等待所有请求完成
    const [result1, result2, result3, result4] = await Promise.all([
        request1,
        request2,
        request3,
        request4
    ]);
    
    // 输出结果
    console.log('请求1结果:', result1);
    console.log('请求2结果:', result2);
    console.log('请求3结果:', result3);
    console.log('请求4结果:', result4);
}

// 运行测试
test();