[英]Why does the return in this function happens before indexDB returns the requested value?
I have a very basic indexedDB with one key.我有一个非常基本的 indexedDB,只有一个键。 I would like to retrieve this value to perform an operation.我想检索此值以执行操作。 Unfortunately, the function that is supposed to do it returns undefined
before indexedDB could return the value.不幸的是,应该这样做的 function 在 indexedDB 可以返回值之前返回undefined
。
Here are the functions:以下是功能:
const getValue = async () => { const res = await IndexedDB.get(1) return console.log("res", res) // displayed before "res" has finished }; export default class IndexedDB { static createDB() { const request = indexedDB.open("myApp", 1); request.onupgradeneeded = (e) => { const db = e.target.result; return db.createObjectStore("myData", { autoIncrement: true }); }; } static addData(data) { const db = indexedDB.open("myApp", 1); db.onsuccess = (e) => { const request = e.target.result.transaction(["myData"], "readwrite").objectStore("myData").add(data); request.onsuccess = (res) => res.target.result; request.onerror = (err) => err }; } static get(key) { const db = indexedDB.open("myApp", key); db.onsuccess = (e) => { const request = e.target.result.transaction(["myData"]).objectStore("myData").get(key); request.onsuccess = (res) => res.target.result; request.onerror = (err) => err }; } }
How to fix this?如何解决这个问题?
Your IndexedDb.get
function is not async, but you are awaiting it for some reason?您的IndexedDb.get
function 不是异步的,但您出于某种原因正在等待它?
Change it to:将其更改为:
static get(key) {
return new Promise((resolve, reject) => {
const db = indexedDB.open("myApp", key);
db.onsuccess = (e) => {
const request = e.target.result
.transaction(["myData"])
.objectStore("myData")
.get(key);
request.onsuccess = (res) => resolve(res.target.result);
request.onerror = (err) => reject(err);
};
});
}
The IndexedDb.get
has some async operations indexedDB.open("myApp", key)
. IndexedDb.get
有一些异步操作indexedDB.open("myApp", key)
。 To handle this kind of sync function you need to either use a promise or you can use a callback function.要处理这种同步 function,您需要使用 promise 或者您可以使用回调 function。
Using Promise使用Promise
static get(key) {
let resolve, reject;
const promise = new Promise((re, rj) => { resolve = re; reject = rj; }),
db = indexedDB.open("myApp", key);
db.onsuccess = (e) => {
const request = e.target.result
.transaction(["myData"])
.objectStore("myData")
.get(key);
request.onsuccess = (res) => resolve(res.target.result);
request.onerror = (err) => reject(err);
};
return promise;
}
Using Callbacks使用回调
static get(key, successCB, errorCB) {
db.onsuccess = (e) => {
const request = e.target.result
.transaction(["myData"])
.objectStore("myData")
.get(key);
request.onsuccess = successCB;
request.onerror = errorCB;
};
}
// get(key, (res) => {}, (err) => {})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.