IndexedDB 非同步API概述

admin發表於2019-06-13
Index非同步API

本文目的是強調一下IndexedDB中的API大多數是非同步的，如果對此已經掌握，略過此文。

也就是說呼叫一個方法之後，直接返回的並不是我們最終的目的結果。

原理與AJAX的XMLHttpRequest物件請求類似，返回的並不是AJAX請求的最終目的值。

對資料庫的讀取或者寫入操作都是以非同步方式進行的，步驟大致如下：

（1）.首先，通過API傳送一個對資料庫的操作請求。

（2）.此事API的返回值並不是最終的目的結果，而是一個請求物件。

（3）.然後通過請求物件上的事件監聽請求的完整狀態，來做出不同的操作。

下面通過程式碼例項對IndexedDB 非同步API進行一下簡單演示。

一.開啟資料庫：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
let request = window.indexedDB.open("antzone", 1);
request.onsuccess = (ev) => {
  // let db = this.result;
  console.log(ev.target);
  let db = ev.target.result;
}
request.onerror = (ev) => {
  // code
}
</script>
</head>
<body>
  <p>上述程式碼開啟一個名為"antzone"</p>
</body>
</html>

上述程式碼執行效果截圖如下：

aid[3327]

程式碼分析如下：

（1）.上述程式碼可以開啟一個名稱為"antzone"資料庫。

（2）.方法open是非同步的，它的返回值並不是開啟的資料庫，而是一個IDBOpenDBRequest型別請求物件。

（3）.通過此物件上的success或者error等事件可以監聽方法的執行狀態。

（4）.如果開啟成功，那麼觸發success事件，request物件的result屬性返回我們所開啟的資料庫。

由此可以看到開啟資料庫是一個非同步操作，IndexedDB資料庫中的絕大多數API都是非同步的。

二.非同步操作的目的：

對於cookie或者其他Web Storage的操作都是同步的，唯獨對IndexedDB操作大多數情況都是非同步的。

這是因為IndexedDB資料庫體量要比cookie或者Web Storage大很多，比如儲存量幾乎無上限。

對於這樣的操作，如果採用同步方式，可能會導致瀏覽器卡頓現象，所以採用非同步是明智。

非同步操作的基本步驟再重複一遍：

（1）.首先釋出一個資料庫操作請求。

（2）.然後利用dom事件對操作請求結果進行監聽。

（3）.根據不同的結果執行不同事件處理函式，然後進行不同的操作。

相關文章