vue2-client 1.11.1 → 1.11.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/utils/indexedDB.js +234 -214
package/package.json
CHANGED
package/src/utils/indexedDB.js
CHANGED
|
@@ -1,214 +1,234 @@
|
|
|
1
|
-
import { post } from '@vue2-client/services/api'
|
|
2
|
-
|
|
3
|
-
const DB_CONFIG = {
|
|
4
|
-
NAME: window.__MICRO_APP_NAME__ ? `view_${window.__MICRO_APP_NAME__}` : 'view',
|
|
5
|
-
STORE_NAME: 'metaCache',
|
|
6
|
-
VERSION: 1,
|
|
7
|
-
CURRENT_VERSION: 1
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
class IndexedDBManager {
|
|
11
|
-
constructor () {
|
|
12
|
-
this.db = undefined
|
|
13
|
-
this.locks = {}
|
|
14
|
-
this.isInMicroApp = !!window.__MICRO_APP_NAME__
|
|
15
|
-
this.microAppName = window.__MICRO_APP_NAME__ || ''
|
|
16
|
-
this.indexedDB = window?.rawWindow?.indexedDB || window.indexedDB || window.webkitindexedDB
|
|
17
|
-
this.IDBKeyRange = window?.rawWindow?.IDBKeyRange || window.IDBKeyRange || window.webkitIDBKeyRange
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
async openDatabase () {
|
|
21
|
-
try {
|
|
22
|
-
return await new Promise((resolve, reject) => {
|
|
23
|
-
const checkRequest = this.indexedDB.open(DB_CONFIG.NAME)
|
|
24
|
-
|
|
25
|
-
checkRequest.onsuccess = (e) => {
|
|
26
|
-
const db = e.target.result
|
|
27
|
-
const currentVersion = db.version
|
|
28
|
-
db.close()
|
|
29
|
-
|
|
30
|
-
DB_CONFIG.CURRENT_VERSION = Math.max(currentVersion, DB_CONFIG.VERSION)
|
|
31
|
-
const request = this.indexedDB.open(DB_CONFIG.NAME, DB_CONFIG.CURRENT_VERSION)
|
|
32
|
-
|
|
33
|
-
request.onerror = (e) => reject(e.currentTarget.error)
|
|
34
|
-
|
|
35
|
-
request.onsuccess = (e) => {
|
|
36
|
-
const db = e.target.result
|
|
37
|
-
if (!db.objectStoreNames.contains(DB_CONFIG.STORE_NAME)) {
|
|
38
|
-
db.close()
|
|
39
|
-
DB_CONFIG.CURRENT_VERSION++
|
|
40
|
-
this.upgradeDatabase(resolve, reject)
|
|
41
|
-
} else {
|
|
42
|
-
resolve(db)
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
request.onupgradeneeded = (e) => {
|
|
47
|
-
const db = e.target.result
|
|
48
|
-
if (!db.objectStoreNames.contains(DB_CONFIG.STORE_NAME)) {
|
|
49
|
-
db.createObjectStore(DB_CONFIG.STORE_NAME, { keyPath: 'key' })
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
checkRequest.onerror = (e) => reject(e.currentTarget.error)
|
|
55
|
-
})
|
|
56
|
-
} catch (error) {
|
|
57
|
-
console.error('打开数据库失败:', error)
|
|
58
|
-
throw error
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
async upgradeDatabase (resolve, reject) {
|
|
63
|
-
const request = this.indexedDB.open(DB_CONFIG.NAME, DB_CONFIG.CURRENT_VERSION)
|
|
64
|
-
|
|
65
|
-
request.onupgradeneeded = (e) => {
|
|
66
|
-
const db = e.target.result
|
|
67
|
-
if (!db.objectStoreNames.contains(DB_CONFIG.STORE_NAME)) {
|
|
68
|
-
db.createObjectStore(DB_CONFIG.STORE_NAME, { keyPath: 'key' })
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
request.onsuccess = (e) => resolve(e.target.result)
|
|
73
|
-
request.onerror = (e) => reject(e.currentTarget.error)
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
async openDB (callback) {
|
|
77
|
-
try {
|
|
78
|
-
if (this.db) {
|
|
79
|
-
const isAlive = await this.checkConnection()
|
|
80
|
-
if (isAlive) {
|
|
81
|
-
callback(this.db)
|
|
82
|
-
return
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
this.db = await this.openDatabase()
|
|
87
|
-
callback(this.db)
|
|
88
|
-
} catch (error) {
|
|
89
|
-
console.error('数据库操作失败:', error)
|
|
90
|
-
if (error.message?.includes('version')) {
|
|
91
|
-
await this.recreateDatabase()
|
|
92
|
-
callback(this.db)
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
async checkConnection () {
|
|
98
|
-
try {
|
|
99
|
-
const transaction = this.db.transaction([DB_CONFIG.STORE_NAME], 'readwrite')
|
|
100
|
-
const store = transaction.objectStore(DB_CONFIG.STORE_NAME)
|
|
101
|
-
await this.promisifyRequest(store.add({ key: 'alive', data: true }))
|
|
102
|
-
return true
|
|
103
|
-
} catch {
|
|
104
|
-
return false
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
promisifyRequest (request) {
|
|
109
|
-
return new Promise((resolve, reject) => {
|
|
110
|
-
request.onsuccess = () => resolve(request.result)
|
|
111
|
-
request.onerror = () => reject(request.error)
|
|
112
|
-
})
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
async getByWeb (key, url, params, callback, processFun) {
|
|
116
|
-
if (this.locks[key]) {
|
|
117
|
-
await this.locks[key]
|
|
118
|
-
return this.getByWeb(key, url, params, callback, processFun)
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
this.locks[key] = (async () => {
|
|
122
|
-
try {
|
|
123
|
-
const data = await this.getData(key)
|
|
124
|
-
if (!data && url) {
|
|
125
|
-
const res = await post(url, params)
|
|
126
|
-
const processedData = processFun ? processFun(res) : res
|
|
127
|
-
|
|
128
|
-
if (process.env.NODE_ENV === 'production' || key !== 'webMobileConfig') {
|
|
129
|
-
await this.add(key, processedData)
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
callback(processedData)
|
|
133
|
-
} else {
|
|
134
|
-
callback(data)
|
|
135
|
-
}
|
|
136
|
-
} catch (error) {
|
|
137
|
-
console.error('获取数据失败:', error)
|
|
138
|
-
if (process.env.NODE_ENV === 'production' && key !== 'webMobileConfig') {
|
|
139
|
-
await this.add(key, null)
|
|
140
|
-
}
|
|
141
|
-
callback(null)
|
|
142
|
-
}
|
|
143
|
-
})()
|
|
144
|
-
|
|
145
|
-
try {
|
|
146
|
-
await this.locks[key]
|
|
147
|
-
} finally {
|
|
148
|
-
delete this.locks[key]
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
async getData (key) {
|
|
153
|
-
return new Promise((resolve) => {
|
|
154
|
-
this.openDB((db) => {
|
|
155
|
-
const store = db.transaction(DB_CONFIG.STORE_NAME, 'readwrite').objectStore(DB_CONFIG.STORE_NAME)
|
|
156
|
-
const request = store.get(key)
|
|
157
|
-
request.onsuccess = (e) => resolve(e.target.result?.data)
|
|
158
|
-
request.onerror = () => resolve(null)
|
|
159
|
-
})
|
|
160
|
-
})
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
async add (key, data) {
|
|
164
|
-
this.openDB((db) => {
|
|
165
|
-
const store = db.transaction(DB_CONFIG.STORE_NAME, 'readwrite').objectStore(DB_CONFIG.STORE_NAME)
|
|
166
|
-
const request = store.add({ key, data })
|
|
167
|
-
request.onerror = () => this.update(key, data)
|
|
168
|
-
})
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
async update (key, data) {
|
|
172
|
-
this.openDB((db) => {
|
|
173
|
-
const store = db.transaction(DB_CONFIG.STORE_NAME, 'readwrite').objectStore(DB_CONFIG.STORE_NAME)
|
|
174
|
-
const request = store.put({ key, data })
|
|
175
|
-
request.onerror = () => console.error('数据更新失败')
|
|
176
|
-
})
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
async delete (key) {
|
|
180
|
-
this.openDB((db) => {
|
|
181
|
-
const store = db.transaction(DB_CONFIG.STORE_NAME, 'readwrite').objectStore(DB_CONFIG.STORE_NAME)
|
|
182
|
-
const request = store.delete(key)
|
|
183
|
-
request.onerror = () => console.error('数据删除失败')
|
|
184
|
-
})
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
async clear (callback) {
|
|
188
|
-
this.openDB((db) => {
|
|
189
|
-
const store = db.transaction(DB_CONFIG.STORE_NAME, 'readwrite').objectStore(DB_CONFIG.STORE_NAME)
|
|
190
|
-
const request = store.clear()
|
|
191
|
-
request.onerror = () => {
|
|
192
|
-
console.error('数据删除失败')
|
|
193
|
-
callback()
|
|
194
|
-
}
|
|
195
|
-
request.onsuccess = () => {
|
|
196
|
-
if (typeof callback === 'function') {
|
|
197
|
-
callback()
|
|
198
|
-
}
|
|
199
|
-
}
|
|
200
|
-
})
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
clearCache () {
|
|
204
|
-
if (this.indexedDB) {
|
|
205
|
-
this.clear(() => {
|
|
206
|
-
location.reload()
|
|
207
|
-
})
|
|
208
|
-
} else {
|
|
209
|
-
location.reload()
|
|
210
|
-
}
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
1
|
+
import { post } from '@vue2-client/services/api'
|
|
2
|
+
|
|
3
|
+
const DB_CONFIG = {
|
|
4
|
+
NAME: window.__MICRO_APP_NAME__ ? `view_${window.__MICRO_APP_NAME__}` : 'view',
|
|
5
|
+
STORE_NAME: 'metaCache',
|
|
6
|
+
VERSION: 1,
|
|
7
|
+
CURRENT_VERSION: 1
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export class IndexedDBManager {
|
|
11
|
+
constructor () {
|
|
12
|
+
this.db = undefined
|
|
13
|
+
this.locks = {}
|
|
14
|
+
this.isInMicroApp = !!window.__MICRO_APP_NAME__
|
|
15
|
+
this.microAppName = window.__MICRO_APP_NAME__ || ''
|
|
16
|
+
this.indexedDB = window?.rawWindow?.indexedDB || window.indexedDB || window.webkitindexedDB
|
|
17
|
+
this.IDBKeyRange = window?.rawWindow?.IDBKeyRange || window.IDBKeyRange || window.webkitIDBKeyRange
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
async openDatabase () {
|
|
21
|
+
try {
|
|
22
|
+
return await new Promise((resolve, reject) => {
|
|
23
|
+
const checkRequest = this.indexedDB.open(DB_CONFIG.NAME)
|
|
24
|
+
|
|
25
|
+
checkRequest.onsuccess = (e) => {
|
|
26
|
+
const db = e.target.result
|
|
27
|
+
const currentVersion = db.version
|
|
28
|
+
db.close()
|
|
29
|
+
|
|
30
|
+
DB_CONFIG.CURRENT_VERSION = Math.max(currentVersion, DB_CONFIG.VERSION)
|
|
31
|
+
const request = this.indexedDB.open(DB_CONFIG.NAME, DB_CONFIG.CURRENT_VERSION)
|
|
32
|
+
|
|
33
|
+
request.onerror = (e) => reject(e.currentTarget.error)
|
|
34
|
+
|
|
35
|
+
request.onsuccess = (e) => {
|
|
36
|
+
const db = e.target.result
|
|
37
|
+
if (!db.objectStoreNames.contains(DB_CONFIG.STORE_NAME)) {
|
|
38
|
+
db.close()
|
|
39
|
+
DB_CONFIG.CURRENT_VERSION++
|
|
40
|
+
this.upgradeDatabase(resolve, reject)
|
|
41
|
+
} else {
|
|
42
|
+
resolve(db)
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
request.onupgradeneeded = (e) => {
|
|
47
|
+
const db = e.target.result
|
|
48
|
+
if (!db.objectStoreNames.contains(DB_CONFIG.STORE_NAME)) {
|
|
49
|
+
db.createObjectStore(DB_CONFIG.STORE_NAME, { keyPath: 'key' })
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
checkRequest.onerror = (e) => reject(e.currentTarget.error)
|
|
55
|
+
})
|
|
56
|
+
} catch (error) {
|
|
57
|
+
console.error('打开数据库失败:', error)
|
|
58
|
+
throw error
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
async upgradeDatabase (resolve, reject) {
|
|
63
|
+
const request = this.indexedDB.open(DB_CONFIG.NAME, DB_CONFIG.CURRENT_VERSION)
|
|
64
|
+
|
|
65
|
+
request.onupgradeneeded = (e) => {
|
|
66
|
+
const db = e.target.result
|
|
67
|
+
if (!db.objectStoreNames.contains(DB_CONFIG.STORE_NAME)) {
|
|
68
|
+
db.createObjectStore(DB_CONFIG.STORE_NAME, { keyPath: 'key' })
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
request.onsuccess = (e) => resolve(e.target.result)
|
|
73
|
+
request.onerror = (e) => reject(e.currentTarget.error)
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
async openDB (callback) {
|
|
77
|
+
try {
|
|
78
|
+
if (this.db) {
|
|
79
|
+
const isAlive = await this.checkConnection()
|
|
80
|
+
if (isAlive) {
|
|
81
|
+
callback(this.db)
|
|
82
|
+
return
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
this.db = await this.openDatabase()
|
|
87
|
+
callback(this.db)
|
|
88
|
+
} catch (error) {
|
|
89
|
+
console.error('数据库操作失败:', error)
|
|
90
|
+
if (error.message?.includes('version')) {
|
|
91
|
+
await this.recreateDatabase()
|
|
92
|
+
callback(this.db)
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
async checkConnection () {
|
|
98
|
+
try {
|
|
99
|
+
const transaction = this.db.transaction([DB_CONFIG.STORE_NAME], 'readwrite')
|
|
100
|
+
const store = transaction.objectStore(DB_CONFIG.STORE_NAME)
|
|
101
|
+
await this.promisifyRequest(store.add({ key: 'alive', data: true }))
|
|
102
|
+
return true
|
|
103
|
+
} catch {
|
|
104
|
+
return false
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
promisifyRequest (request) {
|
|
109
|
+
return new Promise((resolve, reject) => {
|
|
110
|
+
request.onsuccess = () => resolve(request.result)
|
|
111
|
+
request.onerror = () => reject(request.error)
|
|
112
|
+
})
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
async getByWeb (key, url, params, callback, processFun) {
|
|
116
|
+
if (this.locks[key]) {
|
|
117
|
+
await this.locks[key]
|
|
118
|
+
return this.getByWeb(key, url, params, callback, processFun)
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
this.locks[key] = (async () => {
|
|
122
|
+
try {
|
|
123
|
+
const data = await this.getData(key)
|
|
124
|
+
if (!data && url) {
|
|
125
|
+
const res = await post(url, params)
|
|
126
|
+
const processedData = processFun ? processFun(res) : res
|
|
127
|
+
|
|
128
|
+
if (process.env.NODE_ENV === 'production' || key !== 'webMobileConfig') {
|
|
129
|
+
await this.add(key, processedData)
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
callback(processedData)
|
|
133
|
+
} else {
|
|
134
|
+
callback(data)
|
|
135
|
+
}
|
|
136
|
+
} catch (error) {
|
|
137
|
+
console.error('获取数据失败:', error)
|
|
138
|
+
if (process.env.NODE_ENV === 'production' && key !== 'webMobileConfig') {
|
|
139
|
+
await this.add(key, null)
|
|
140
|
+
}
|
|
141
|
+
callback(null)
|
|
142
|
+
}
|
|
143
|
+
})()
|
|
144
|
+
|
|
145
|
+
try {
|
|
146
|
+
await this.locks[key]
|
|
147
|
+
} finally {
|
|
148
|
+
delete this.locks[key]
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
async getData (key) {
|
|
153
|
+
return new Promise((resolve) => {
|
|
154
|
+
this.openDB((db) => {
|
|
155
|
+
const store = db.transaction(DB_CONFIG.STORE_NAME, 'readwrite').objectStore(DB_CONFIG.STORE_NAME)
|
|
156
|
+
const request = store.get(key)
|
|
157
|
+
request.onsuccess = (e) => resolve(e.target.result?.data)
|
|
158
|
+
request.onerror = () => resolve(null)
|
|
159
|
+
})
|
|
160
|
+
})
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
async add (key, data) {
|
|
164
|
+
this.openDB((db) => {
|
|
165
|
+
const store = db.transaction(DB_CONFIG.STORE_NAME, 'readwrite').objectStore(DB_CONFIG.STORE_NAME)
|
|
166
|
+
const request = store.add({ key, data })
|
|
167
|
+
request.onerror = () => this.update(key, data)
|
|
168
|
+
})
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
async update (key, data) {
|
|
172
|
+
this.openDB((db) => {
|
|
173
|
+
const store = db.transaction(DB_CONFIG.STORE_NAME, 'readwrite').objectStore(DB_CONFIG.STORE_NAME)
|
|
174
|
+
const request = store.put({ key, data })
|
|
175
|
+
request.onerror = () => console.error('数据更新失败')
|
|
176
|
+
})
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
async delete (key) {
|
|
180
|
+
this.openDB((db) => {
|
|
181
|
+
const store = db.transaction(DB_CONFIG.STORE_NAME, 'readwrite').objectStore(DB_CONFIG.STORE_NAME)
|
|
182
|
+
const request = store.delete(key)
|
|
183
|
+
request.onerror = () => console.error('数据删除失败')
|
|
184
|
+
})
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
async clear (callback) {
|
|
188
|
+
this.openDB((db) => {
|
|
189
|
+
const store = db.transaction(DB_CONFIG.STORE_NAME, 'readwrite').objectStore(DB_CONFIG.STORE_NAME)
|
|
190
|
+
const request = store.clear()
|
|
191
|
+
request.onerror = () => {
|
|
192
|
+
console.error('数据删除失败')
|
|
193
|
+
callback()
|
|
194
|
+
}
|
|
195
|
+
request.onsuccess = () => {
|
|
196
|
+
if (typeof callback === 'function') {
|
|
197
|
+
callback()
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
})
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
clearCache () {
|
|
204
|
+
if (this.indexedDB) {
|
|
205
|
+
this.clear(() => {
|
|
206
|
+
location.reload()
|
|
207
|
+
})
|
|
208
|
+
} else {
|
|
209
|
+
location.reload()
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
async getAll () {
|
|
214
|
+
return new Promise((resolve, reject) => {
|
|
215
|
+
this.openDB((db) => {
|
|
216
|
+
const store = db.transaction(DB_CONFIG.STORE_NAME, 'readonly').objectStore(DB_CONFIG.STORE_NAME)
|
|
217
|
+
const request = store.getAll()
|
|
218
|
+
request.onsuccess = (e) => resolve(e.target.result)
|
|
219
|
+
request.onerror = (e) => reject(e.target.error)
|
|
220
|
+
})
|
|
221
|
+
})
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
getAllLegacy (callback) {
|
|
225
|
+
this.openDB((res) => {
|
|
226
|
+
const store = res.transaction(DB_CONFIG.STORE_NAME, 'readonly').objectStore(DB_CONFIG.STORE_NAME)
|
|
227
|
+
const request = store.getAll()
|
|
228
|
+
request.onerror = (e) => callback(null, e.target.error)
|
|
229
|
+
request.onsuccess = (e) => callback(e.target.result)
|
|
230
|
+
})
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
export const indexedDB = new IndexedDBManager()
|