为什么这个函数中的 return 发生在 indexDB return 请求的值之前？

Question

我有一个非常基本的带有一个键的 indexedDB。我想检索此值以执行操作。不幸的是，在 indexedDB 可以 return 值 return 之前 returns undefined 的函数。

函数如下：

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
    };
  }

}

如何解决这个问题？

Answer 1

您的 IndexedDb.get 函数不是异步的，但您出于某种原因正在等待它？

改为：

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);
    };
  });
}

Answer 2

IndexedDb.get 有一些异步操作 indexedDB.open("myApp", key)。要处理这种同步功能，您需要使用承诺或使用回调函数。

使用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;
}

使用回调

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) => {})

为什么这个函数中的 return 发生在 indexDB return 请求的值之前？

Why does the return in this function happens before indexDB returns the requested value?

javascript

indexeddb