Q&A
openIndexeddb() が promise を返していないように見えるのですが、それはよろしいのですか？
Javascriptのpromiseによる実行順序の制御について
●やりたいこと
promiseにて関数の実行順序を制御したい。
openIndexeddb関数→displayAlldate関数→makeInputfield関数の順番で実行したい。
●質問内容
以下のopenIndexeddb関数内のopenRequest.onsuccess実行後に、displayAlldate関数を実行したいのですが、
~~実行前にdisplayAlldate関数が実行されてしまいます。
~~
~~エラー：ncaught (in promise) TypeError: Cannot read property 'transaction' of undefined at displayAlldate
~~
~~ご指摘頂いた内容にて、
1,openIndexeddb関数にpromiseを追加
2,async/awaitでopenIndexeddb関数にawaitを付与しました。
ただ、同関数の実行後に、他のdisplayAlldate関数→makeInputfield関数が実行されません。
どこを修正すれば、良いのでしょうか？
~~
ありがとうございます。
再度ご指摘頂いた内容で修正し、動作はしたようですが、知識不足な点が多いため、勉強します。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width" /> </head> <body> <input type ="button" value ="全件表示" onclick ="displayAlldate()"> <div id="contsPage1id"></div> <div id="contsPage2id"></div> <script> //promiseによる実行順序の制御（openIndexeddb実行後→displayAlldate→makeInputfieldの順番で実行） start(); async function start(){ await openIndexeddb(); displayAlldate(); makeInputfield(); } //indexeddbデータベースを開きObjectStore作成 var db; var indexedDB = window.indexedDB || window.mozIndexedDB || window.msIndexedDB; function openIndexeddb(){ return new Promise((resolve,reject) =>{ alert("１データベースを開く"); if (indexedDB) { // データベースを削除したい場合はコメントを外します。 //indexedDB.deleteDatabase("mydb"); var openRequest = indexedDB.open("mydb", 1.0); openRequest.onupgradeneeded = function(event) { // データベースのバージョンに変更があった場合 db = event.target.result; console.log(db); var store = db.createObjectStore("mystore", { keyPath: "mykey",autoIncrement:true}); console.log(store); } openRequest.onsuccess = function(event) { db = event.target.result; resolve(db); console.log(db); alert("２データベースを開くことに成功"); } } else { window.alert("このブラウザではIndexed DataBase API は使えません。"); } }) } //データ一覧表示 function displayAlldate() { alert("３データ一覧表示"); var result = document.getElementById("contsPage2id"); result.innerHTML = ""; var transaction = db.transaction(["mystore"], "readwrite"); var store = transaction.objectStore("mystore"); var request = store.openCursor(); request.onsuccess = function (event) { if(event.target.result == null) { return; } var cursor = event.target.result; var data = cursor.value; result.innerHTML += "<table border='1'><td>"+"key：" + cursor.key + "</td>" +"<td>"+"value：" + data.myvalue + " value2：" + data.myvalue2 +"</td></table>"; cursor.continue(); } } //データ入力欄、保存ボタン表示 function makeInputfield(){ alert("４データ入力欄表示"); const result = document.getElementById("contsPage1id"); if (!result.hasChildNodes()){ const input1 = document.createElement("input"); input1.setAttribute("type","text"); var newvalue = newvalue; input1.setAttribute("id","newvalue"); input1.setAttribute("name","newvalue"); result.appendChild(input1); const input2 = document.createElement("input"); input2.setAttribute("type","text"); var newvalue2 = newvalue2; input2.setAttribute("id","newvalue2"); input2.setAttribute("name","newvalue2"); result.appendChild(input2); const input3 = document.createElement("input"); input3.setAttribute("type","text"); var newkey = newkey; input3.setAttribute("id","newkey"); input3.setAttribute("name","newkey"); result.appendChild(input3); const input4 = document.createElement("input"); input4.setAttribute("type","button"); input4.setAttribute('onclick','saveBtn(\'' + newkey + '\',\'' + newvalue + '\',\'' + newvalue2 + '\');'); input4.setAttribute("value","保存"); result.appendChild(input4); } } //データ保存ボタン function saveBtn(newkey,newvalue,newvalue2){ var value = newvalue; var value2 = newvalue2; var key = newkey; function transactStore(event){ var transaction = db.transaction(["mystore"], "readwrite"); var store = transaction.objectStore("mystore"); function putStore(event){ var value = document.getElementById("newvalue").value; var value2 = document.getElementById("newvalue2").value; var key = document.getElementById("newkey").value; var requestupdate = store.put({mykey: key, myvalue: value, myvalue2: value2}); requestupdate.onsuccess = function(event){ document.getElementById("newvalue").value = ""; document.getElementById("newvalue2").value = ""; document.getElementById("newkey").value = ""; alert("保存しました。"); displayAlldate(); } } putStore(event); } transactStore(event); } saveBtn; </script> </body> </html>
openIndexeddb() が返す promise が resolve しないように見えるのですが……
回答2件
0
ベストアンサー
基本的知識が欠けているように見えますので、まずPromiseの勉強をされてはいかがでしょうか。
勉強する時間がないのであれば、ひとまず、
js
1 return new Promise( resolve => 2//... 3 obj.onxxx = resolve // obj.onxxx = e => resolve(e) と等価 4//... 5 )
みたいな形にするのを目指してください。
投稿2020/02/27 04:35
総合スコア36074
ご指摘ありがとうございます。
resolve追加にて動作はしたようです。
ただ、確かに勉強不足ですね <(_ _)>
今日はゆっくり勉強できるので、再度promiseついて調べてみます。
0
それぞれのユーザー関数がpromiseを返すようにしてasync/awaitで処理してください
投稿2020/02/26 06:15
総合スコア114767
いちおうサンプルだけ
const a=async ()=>{
console.log("start");
console.log(await b());
console.log(await c());
console.log(await d());
console.log("end");
};
const b=async ()=>new Promise(resolve=>{setTimeout(()=>{resolve("b")},300)});
const c=async ()=>new Promise(resolve=>{setTimeout(()=>{resolve("c")},200)});
const d=async ()=>new Promise(resolve=>{setTimeout(()=>{resolve("d")},100)});
a();
上記b->c->dと指定順に実行されています
wait時間からawaitしないとd->c->bの順に実行されます
あなたの回答
tips
プレビュー
