类型错误：无法读取未定义的属性（读取“事务”）-->当我尝试在离线状态下写入indexedDB时

Question

我试图让我的应用程序在没有互联网连接时使用indexedDB。我有一个 idb.js 文件，它设置对象存储，然后定义一个在另一个 js 文件中使用的 saveRecord 函数：

let db;

const request = indexedDB.open('pizza_hunt', 1);

request.onupgradeneeded = function(event) {
    const db = event.target.result;
    db.createObjectStore('new_pizza', { autoIncrement: true });
}

request.onsuccess = function(event) {
    // when db is successfully created with its object store (from onupgradeneeded event above) or simply established a connection, save reference to db in global variable
    if (navigator.onLine) {
        // uploadPizza();
    }
};

request.onerror = function(event) {
    console.log(event.target.errorCode);
};

// This function will be executed if we attempt to submit a new pizza and there's no internet connection
function saveRecord(record) {
    const transaction = db.transaction(['new_pizza'],'readwrite');

    const pizzaObjectStore = transaction.objectStore('new_pizza');

    pizzaObjectStore.add(record);
};  

但是当在另一个文件中调用该函数时，我不断收到上面的错误，即 .transaction 是undefined 并且它不会向 new_pizza 对象存储写入任何内容。

这是调用它的上下文（另一个 js 文件）。除非触发 catch ，否则一切都会有效：

const formData = { pizzaName, createdBy, size, toppings };

  fetch('/api/pizzas', {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(formData)
  })
    .then(response => response.json())
    .then(postResponse => {
      alert('Pizza created succesfully!');
      console.log(postResponse);
    })
    .catch(err => {
      console.log(err);
      saveRecord(formData);
    });