在 Angular2+ 中正确使用 PouchDB？

编程问答 2022-05-31

问题描述

我尝试将对象存储在客户端的 pouchdb 中。

创建数据库并获取所有文档运行良好。 但是当我尝试通过 db.find() 查询数据库时，需要几分钟才能得到它 - 浏览器也会滞后，cpu 和 RAM 也会增加很多。

我知道有问题，但我不知道我做错了什么。

这里是 angular pouchDB 服务：

import { Injectable } from '@angular/core';
import PouchDB from 'pouchdb';
import PouchFind from 'pouchdb-find';
import { IImage } from '../_interfaces/image';
import { ISelector } from '../_interfaces/pouchdb-selector';
PouchDB.plugin(PouchFind);

@Injectable({
  providedIn: 'root'
})
export class PouchdbService {
  public pouchdb = new PouchDB("pouchform");
  
  constructor() {
    this.pouchdb.info().then(function (info) {
      console.log(info);
    })
  }

  insert(content: IImage){
    this.pouchdb.post(content)
  }

  getAll(): Promise<IImage[]>{
    return new Promise<IImage[]>((resolve,reject) => {
      this.pouchdb.allDocs({include_docs: true,attachments: true})
        .then(data => {
          let rows: any = data.rows
          let images: IImage[] = rows.map(d => d.doc)
          resolve(images)
      })
    })
  }

  query(selector: ISelector): Promise<any>{
    return new Promise<any>((resolve,reject) => {
        this.pouchdb.find({
          selector: selector.selectors // e.g. it is {cam_brand: "Apple"}
        }).then(result => {
          console.log(result)
          resolve(result)
        }).catch(err => {
          console.log("err",err)
        })
    })
  }
}

查询：

this.pouchdb.query({selectors: {cam_brand: "Apple"}}).then(i => {
  console.log("filtered",i)
})

我之前也试过createIndex，但是没有提高性能

例如：

  • 该对象仅包含绝对图像路径（
  • 数据库中只有 400 个对象，相当少

编辑： 现在我直接用 indexedDB 尝试了 id。 当我添加这 400 个对象（在 for 循环中一个一个）时，循环在几毫秒内完成。 等待 2-3 分钟后，出现插入响应。 我想我对 indexedDB 本身有一些问题。

如果有帮助，我将 Angular 10 与电子一起使用。

编辑电子： 我现在在一个新的锅炉模板中迁移了 pouchdb。 在平台上的“热重载”功能上：“WEB”工作正常。 但是当我构建具有 win32 平台的电子产品时，它的行为同样缓慢 我需要一些特殊的导入来解决这个问题吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularindexeddbindexeddbjavascriptpouchdb