如何从事件处理程序中返回indexedDB查询结果？ [英] How to return indexedDB query result out of event handler?

问题描述

我必须从indexedDB返回查询结果，但结果仅在成功 c事件处理程序中可用。

I have to return query result from indexedDB, but the result is only available in onsuccess event handler.

1  function listPeople(){
     ...
4    var open = indexedDB.open("AccordionDatabase",1),
5        res;
6
7    open.onsuccess = function(){
8        var db = open.result;
9        var transaction = db.transaction("PeopleStore", "readwrite");
10        var store = transaction.objectStore("PeopleStore");
11        var request = store.getAll();
12        request.onsuccess = function(event){
13            res = event.target.result;
14            console.log(res);
15        };
16
17        // Close the db when the transaction is done
18        transaction.oncomplete = function() {
19            db.close();
20        };
21
22    };
23    return res;
24 }

函数调用的输出显示 undefined ，尽管控制台会打印结果数组。请指导我如何将变量用作输出。

The output of the function call shows undefined, though console prints the result array. Please guide me how to use the variable as output.

推荐答案

您可以使用以下项目： https://github.com/jakearchibald/idb

you can either use this project: https://github.com/jakearchibald/idb

将indexedDB操作包装到一个Promise中，从而使列表中的人员异步：

or you need to wrap indexedDB operation into a promise and thus make the list people asynchronous:

function listPeople() {
// ...
  return new Promise(function (resolve, reject) {
    var open = indexedDB.open("AccordionDatabase",1),
    open.onsuccess = function() {
      var db = open.result;
      var transaction = db.transaction("PeopleStore", "readwrite");
      var store = transaction.objectStore("PeopleStore");
      var request = store.getAll();
      request.onsuccess = function(event){
        resolve(event.target.result);
      };

      request.onerror = function(event) { reject(event) }

      // Close the db when the transaction is done
      transaction.oncomplete = function() {
        db.close();
      };
      transaction.onerror = function(event) { reject(event) }
    };
    open.onerror = function(event) { reject(event) }
  })
}

// usage:
function doWorkWithListedPeople(people) {
  // ...
}

function handleErrorsDuringIndexedDbRequest(event) {
  // ...
}

listPeople().then(doWorkWithListedPeople).catch(handleErrorsDuringIndexedDbRequest)

// or also
listPeople().then(function(people) { doWorkWithListedPeople(people) })

问题是，您创建一个表示最终将完成的工作的承诺。您可以告诉JS，最终，当诺言得到解决（成功）后，您想要然后处理已传递给 resolve的任何内容。参见 https://developer.mozilla.org/cs/docs / Web / JavaScript / Reference / Global_Objects / Promise 和 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function 了解详情

The thing is, you create a promise that represents work that will be eventually done. You can tell JS that eventually, when the promise has been resolved (success), you want to then to work with anything that has been passed to resolve. See https://developer.mozilla.org/cs/docs/Web/JavaScript/Reference/Global_Objects/Promise and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function for details

编辑

此外，如果您不喜欢那么，则可以使用async await进行处理，从而取消了承诺。请注意，您只能在异步函数中使用await关键字：

furthermore, if you don't like thens, you can make do with async await, which unwraps promises. Just beware, you can only use await keyword from within async function:

async function doStuff() {
  try {
    var people = await listPeople()
    // now you can work with ppl
  }
  catch (err) {
    // handle listPeople errors here
  }
}

这篇关于如何从事件处理程序中返回indexedDB查询结果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！