返回

简明扼要的介绍IndexedDB的Promise封装

前端




IndexedDB的Promise封装简介

IndexedDB是一种非关系型数据库,它与传统的关系型数据库存在着明显的差异。在实际的应用场景中,我对IndexedDB进行了Promise二次封装,以便更好地满足日常开发的需求。

IndexedDB的Promise封装代码实现

以下是我对IndexedDB的Promise封装的代码实现:

// 打开数据库
const openDB = (dbName, version) => {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open(dbName, version);
    request.onsuccess = (event) => {
      resolve(event.target.result);
    };
    request.onerror = (event) => {
      reject(event.target.error);
    };
    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      // 在这里创建表和索引
    };
  });
};

// 关闭数据库
const closeDB = (db) => {
  db.close();
};

// 添加数据
const addData = (db, storeName, data) => {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(storeName, 'readwrite');
    const store = transaction.objectStore(storeName);
    const request = store.add(data);
    request.onsuccess = (event) => {
      resolve(event.target.result);
    };
    request.onerror = (event) => {
      reject(event.target.error);
    };
  });
};

// 获取数据
const getData = (db, storeName, key) => {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(storeName, 'readonly');
    const store = transaction.objectStore(storeName);
    const request = store.get(key);
    request.onsuccess = (event) => {
      resolve(event.target.result);
    };
    request.onerror = (event) => {
      reject(event.target.error);
    };
  });
};

// 更新数据
const updateData = (db, storeName, data) => {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(storeName, 'readwrite');
    const store = transaction.objectStore(storeName);
    const request = store.put(data);
    request.onsuccess = (event) => {
      resolve(event.target.result);
    };
    request.onerror = (event) => {
      reject(event.target.error);
    };
  });
};

// 删除数据
const deleteData = (db, storeName, key) => {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(storeName, 'readwrite');
    const store = transaction.objectStore(storeName);
    const request = store.delete(key);
    request.onsuccess = (event) => {
      resolve(event.target.result);
    };
    request.onerror = (event) => {
      reject(event.target.error);
    };
  });
};

IndexedDB的Promise封装使用示例

以下是IndexedDB的Promise封装的使用示例:

// 打开数据库
const db = await openDB('myDB', 1);

// 添加数据
const data = {
  name: 'John Doe',
  age: 30
};
await addData(db, 'users', data);

// 获取数据
const result = await getData(db, 'users', 1);
console.log(result);

// 更新数据
data.age = 31;
await updateData(db, 'users', data);

// 删除数据
await deleteData(db, 'users', 1);

// 关闭数据库
await closeDB(db);

IndexedDB的Promise封装的优势

对IndexedDB进行Promise二次封装具有以下优势:

  • 简化了IndexedDB的API,使用起来更加方便。
  • 提高了IndexedDB的性能,因为Promise可以并行执行。
  • 增强了IndexedDB的可靠性,因为Promise可以捕获错误并进行处理。

结语

总之,对IndexedDB进行Promise二次封装是一个非常有用的技巧,它可以简化IndexedDB的API,提高性能,增强可靠性,从而使IndexedDB在Web开发中更加好用。