用promsie解决IndexedDb异步问题

promsie解决IndexedDb异步问题"/>

用promsie解决IndexedDb异步问题

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

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

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

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

接下来用mock模拟一下

工具类

export default class DB {constructor(dbName) {this.dbName = dbNamethis.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.resultconst 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('')
// }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('')
}
// 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内,免得一些奇怪的错误