用promsie解决IndexedDb异步问题

就像这样,promise类里面的方法我直接同步调试时调用会报错,因为是异步的,那咋办

第一种可以用回调函数的形式,例如点击button,就可以不报错,因为创建数据库要时间,不信的话加个定时器就行了,如果用点击函数的方法,你点击的时候早就创建完了

---

第二种就是用return promise返回创建好的数据库

这样的话可以用then里面调用,但这样不行,可以用async await调用,同步的方式调用异步方法

---

接下来用mock模拟一下

工具类

export default class DB {
  constructor(dbName) {
    this.dbName = dbName
    this.db = null
  }
  openStore(dbName, keyPath, indexs) {
    return new Promise((resolve, reject) => {
      const request = window.indexedDB.open(this.dbName, 6)
      // console.log('我在数据里');
      request.onsuccess = (event) => {
        this.db = event.target.result;
        // console.log('打开成功');
        // console.log(event);
        console.log(this.db, 'this.db');
        resolve(this.db)
      }
      request.onerror = (event) => {
        // console.log('打开失败');
        // console.log(event)
        reject()
      }
      request.onupgradeneeded = (event) => {
        // 第一步,创建对象仓库
        const db = event.target.result
        const store = db.createObjectStore(dbName, { autoIncrement: true, keyPath })
        //传入数组,动态地创建索引
        if (indexs && indexs.length > 1) {
          indexs.map(item => {
            store.createIndex(item, item, { unique: false })
          })
        }
        store.transaction.oncomplete = () => {
          console.log('创建仓库成功');
        }
        console.log('更新成功');
        console.log(event)
      }
    })
  }
  addLover(storeName, data) {
    // console.log(this.db);
    console.log(this.db, '打印当前');
    const store = this.db.transaction([storeName], "readwrite").objectStore(storeName)
    const request = store.put(data)
    return new Promise((resolve, reject) => {
      request.onsuccess = (e) => {
        console.log('增加成功', e);
        resolve()
      }
      request.onerror = (e) => {
        console.log('增加失败', e);
      }
    })


  }
  deleteLover(storeName, key) {
    const store = this.db.transaction([storeName], 'readwrite').objectStore(storeName)
    const request = store.delete(key)
    request.onsuccess = () => {
      console.log('删除成功');
    }
    request.onerror = () => {
      console.log('删除失败');
    }

  }
  // 查询所有数据
  getAllList(storeName) {
    return new Promise((resolve, reject) => {
      const store = this.db.transaction([storeName]).objectStore(storeName)
      const request = store.getAll()
      request.onsuccess = (e) => {
        console.log('查询成功');
        // console.log(e.target.result);
        resolve(e.target.result)
      }
      request.onerror = () => {
        console.log('查询失败');
        reject('查询失败')
      }
    })
  }
  // 查询某一条数据
  getItem(storeName, key) {
    const store = this.db.transaction([storeName]).objectStore(storeName)
    const request = store.get(key)
    request.onsuccess = (e) => {
      console.log('查询成功');
      console.log(e.target.result);
    }
    request.onerror = () => {
      console.log('查询失败');
    }
  }
}

接口封装

// import { httpPost, httpGet } from '@/utils/http.js'
// export function fetchTest() {

//   return httpGet('https://c4156a34-94b2-4302-969f-e96f6277625a.bspapp.com/pie')
// }

import http from '@/utils/http.js'
// 引入db工具类
import IndexDb from '@/utils/indexedDb.js'
// 实例化一个db
const IndexDbInstance = new IndexDb('godness')
export function fetchTest() {
  console.log(http);
  return http.httpGet('https://c4156a34-94b2-4302-969f-e96f6277625a.bspapp.com/pie')
}
// mock接口
export async function fetchGodness() {
  await IndexDbInstance.openStore('girl', 'id', ['name', 'sex'])

  return await IndexDbInstance.getAllList('girl').then(res => {
    return {
      code: 200, meesage: '获取成功', dara: res
    }
  }).catch(res => {
    return '查询失败'
  })

}

建议一个函数如果是promise的话,直接把函数里卸载promise内,免得一些奇怪的错误