使用promise将回调方式变为同步等待方式

应用场景:需同步获取值的时候,回调方式使用起来比较难受,并且库里内并未提供同步api,此时可使用promise+await将回调方式改为同步执行,

核心:promise+await将回调改为同步调用

 const result = await new Promise((resolve, reject) => {
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(false);
  });

原始代码:

// 通用方法 - 获取数据
export async function getCache(key) {
  const database = await initDB();
  return new Promise((resolve, reject) => {
    const tx = database.transaction('apiCache', 'readonly');
    const store = tx.objectStore('apiCache');
    const request = store.get(key);

    request.onsuccess = () => {
      const result = request.result;

      if (!result) {
        resolve(null); // 数据不存在
        return;
      }

      // 检查数据是否过期
      if (result.expiry < Date.now()) {
        deleteCache(key); // 删除过期数据
        resolve(null);
      } else {
        resolve(result.data);
      }
    };

    request.onerror = () => {
      reject(request.error); // 处理错误
    };
  });
}

优化后的代码:

// 通用方法 - 获取数据
export async function getCache(key) {
  const database = await initDB();
  const tx = database.transaction('apiCache', 'readonly');
  const store = tx.objectStore('apiCache');

  const request = await store.get(key);

  // 将 IndexedDB 请求封装为 Promise
  const result = await new Promise((resolve, reject) => {
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(false);
  });

  if (!result) {
    return null;
  }

  // 检查数据是否过期
  if (result.expiry < Date.now()) {
    await deleteCache(key); // 删除过期数据
    return null;
  }

  return result.data;
}

 

posted @ 2025-03-18 14:57  SimoonJia  阅读(72)  评论(0)    收藏  举报