return Promise 的正確使用方法

 








你又遇到了一個非常經典的非同步 (asynchronous) 問題！這和之前 chrome.alarms.get() 的情況是完全一樣的。

簡單的答案是：你的變數 isearly 的值不是一個 int (整數)，而是一個 Promise 物件。

錯誤的根本原因

讓我們一步步分解你的程式碼，看看它實際上做了什麼：

  1. chrome.storage.local.get(['isearly'])

    • 這行程式碼被執行。它是一個非同步操作，意思是它會去背景讀取資料，但不會停下來等待結果。

    • 它立即回傳一個 Promise 物件。這個 Promise 物件可以看作是一個「取貨單」，它承諾「我稍後會把資料給你」。

  2. .then(...) 和 .catch(...)

    • 你把取貨單（Promise）交給了 .then() 和 .catch()。這相當於告訴程式：「等貨到了（操作成功），就執行 .then() 裡面的程式碼；如果送貨出錯（操作失敗），就執行 .catch() 裡面的程式碼。」

  3. const isearly = ...

    • 你的變數 isearly 被賦予的值，是整個 Promise 鏈（get(...).then(...).catch(...)）的最終回傳值。

    • 一個 Promise 鏈本身回傳的仍然是一個 Promise！

結論：你的程式碼執行完畢後，isearly 變數裡面裝的是一個 Promise 物件，而不是你期望的數字 0 或 parseInt(result.isearly)。

比喻：
你去餐廳點餐（chrome.storage.local.get），服務生給了你一個取餐的號碼牌 (Promise)。你不能直接把這個號碼牌吃掉。你必須等待叫到你的號碼時（.then() 被執行），才能拿到真正的餐點（result）。

你的程式碼相當於把號碼牌存到了 isearly 變數裡。

如何修正

解決方案和之前一樣：你需要把「使用 isearly 這個值」的程式碼，放到一個能夠等待 Promise 完成的地方。

方法一：使用 async/await (最推薦，最清晰)

這是處理非同步操作最現代、最易讀的方式。你需要將你的邏輯包在一個 async 函式中。

JavaScript
// 創建一個 async 函式
async function getEarlySetting() {
    try {
        // 1. 使用 await 來「暫停」函式，直到 storage.get 完成，並直接取得 result
        const result = await chrome.storage.local.get(['isearly']);

        // 2. 檢查 result 是否存在，以及 result.isearly 是否有值
        //    這比 if(result) 更安全，因為空物件 {} 也是 true
        if (result && result.isearly) {
            // 3. 回傳解析後的整數
            return parseInt(result.isearly);
        } else {
            // 4. 回傳預設值
            return 0;
        }
    } catch (error) {
        showMessage({ name: '發生錯誤！錯誤訊息請看控制台。', delay: 10, type: 'error' });
        console.error("Error retrieving data:", error);
        // 發生錯誤時也回傳預設值
        return 0;
    }
}

// --- 如何使用這個 async 函式 ---
async function mainLogic() {
    // 呼叫 getEarlySetting 並用 await 取得它回傳的整數值
    const isearly = await getEarlySetting(); 

    // 現在，isearly 變數就是你真正想要的數字了！
    console.log(`提前通知的時間是: ${isearly} 分鐘`); 
    console.log(typeof isearly); // 輸出: "number"

    // --- 在這裡執行所有需要用到 isearly 值的後續操作 ---
    // 例如： someFunctionThatUses(isearly);
}

// 執行你的主要邏輯
mainLogic();

方法二：繼續使用 .then() (將後續操作放進去)

如果你不想使用 async/await，那麼你必須接受一個事實：所有需要用到 isearly 值的程式碼，都必須被放在 .then() 的回呼函式裡面。

JavaScript
function initialize() {
    chrome.storage.local.get(['isearly']).then((result) => {
        let isearly = 0; // 先設定一個預設值

        if (result && result.isearly) {
            isearly = parseInt(result.isearly);
        }

        // --- 在這裡執行所有需要用到 isearly 值的後續操作 ---
        console.log(`提前通知的時間是: ${isearly} 分鐘`);
        console.log(typeof isearly); // 輸出: "number"
        
        // 範例：呼叫一個函式並把 isearly 當作參數傳進去
        setupNotifications(isearly);

    }).catch((error) => {
        showMessage({ name: '發生錯誤！錯誤訊息請看控制台。', delay: 10, type: 'error' });
        console.error("Error retrieving data:", error);
        
        // 即使出錯，也要用預設值執行後續操作
        const isearly = 0;
        setupNotifications(isearly);
    });

    // ⚠️ 在這裡 (then 的外面) 存取 isearly 是不可能的，因為程式碼會先執行到這裡！
}

function setupNotifications(earlyMinutes) {
    // ... 你的設定邏輯 ...
    console.log(`正在根據 ${earlyMinutes} 分鐘的設定來初始化通知。`);
}

// 執行初始化
initialize();

總結

  • 你的錯誤：試圖將一個 Promise (一個承諾/號碼牌) 當作一個 number (一個實際的值) 來使用。

  • 解決方案：必須使用 await 或將程式碼移入 .then() 來等待承諾兌現，拿到實際的值之後，再進行後續操作。

留言

張貼留言

這個網誌中的熱門文章

Offscreen Canvas

 你說得完全正確！這是一個非常經典的效能最佳化思路。如果尖刺框的參數沒有改變，重複計算所有尖刺的路徑和幾何形狀確實是一種浪費。 有幾種方法可以「記憶」或快取你畫的尖刺框，避免不必要的重繪計算： 快取到一個離屏 Canvas (Offscreen Canvas) - 最推薦的方法 原理 ：創建一個與主 Canvas 大小相同（或者只需要能容納尖刺框的大小）的隱藏 Canvas。當尖刺框的參數改變時，或者第一次繪製時，將完整的尖刺框（包括尖刺和中間的填充橢圓）繪製到這個離屏 Canvas 上。 後續繪製 ：在主 Canvas 的每一幀渲染時，如果尖刺框的參數沒有改變，你只需要使用 ctx.drawImage() 將離屏 Canvas 的內容直接繪製到主 Canvas 的目標位置即可。這遠比重新計算和繪製所有尖刺要快得多。 優點 ： 效能提升顯著， drawImage 非常快。 代碼結構清晰，繪製邏輯和快取邏輯分離。 可以快取包含複雜效果（如漸層、陰影等）的圖形。 缺點 ： 需要額外的記憶體來儲存離屏 Canvas。對於大多數尖刺框來說，這通常不是問題。 如果尖刺框需要動態改變大小或位置，離屏 Canvas 的管理（重新創建或調整大小）需要考慮。 快取路徑指令 (Path2D Object) - 適用於路徑本身 原理 ： Path2D 物件可以儲存一系列的 Canvas 路徑指令（ moveTo , lineTo , ellipse , bezierCurveTo 等）。當尖刺框的參數改變時，你構建一個或多個 Path2D 物件來代表尖刺框的各個部分（例如，一個 Path2D 給中心橢圓，另一個給所有尖刺的集合）。 後續繪製 ：如果參數未變，你可以直接使用 ctx.fill(cachedPath) 或 ctx.stroke(cachedPath) 來繪製已儲存的路徑。 優點 ： 比重新執行所有 moveTo/lineTo 更快一些，因為路徑已經編譯好了。 記憶體佔用可能比離屏 Canvas 小。 缺點 ： Path2D 只儲存路徑，不儲存樣式（顏色、線寬等）。你仍然需要在繪製時設定 ctx.fillStyle , ctx.strokeStyle , ctx.lineWidth 。 對於你用 drawTaperedLine 繪製的填充錐形尖刺，...
閱讀完整內容

外部網頁新增 Google 日曆行程(URL模板)

  好的，從外部網頁新增 Google 日曆行程，最常用且最簡單的方法是使用 Google Calendar Event Publisher Guide 提供的 URL 模板 。這種方法不需要複雜的 API 整合或使用者授權流程 (OAuth)，只需要產生一個特殊格式的連結即可。 使用者點擊這個連結後，會被導向到他們自己的 Google 日曆，並看到一個預先填好資訊的新增行程頁面，他們只需要確認並儲存即可。 以下是詳細步驟和說明： 方法：使用 Google 日曆事件發布連結 (URL Template) 基本 URL 結構： https: //www.google.com/calendar/render?action=TEMPLATE 添加參數以預填行程資訊： 在基本 URL 後面加上 & 和 參數名稱=參數值 來指定行程細節。重要的參數包括： text : 行程標題 (必填) 。 範例： &text=團隊會議 dates : 行程開始和結束時間 (必填) 。格式非常重要，必須是 ISO 8601 格式，且 強烈建議使用 UTC (世界標準時間) ，以避免時區混淆。 特定時間格式： YYYYMMDDTHHMMSSZ/YYYYMMDDTHHMMSSZ (Z 表示 UTC) 範例 (2024年7月26日 UTC 下午 2:00 到 3:00)： &dates=20240726T140000Z/20240726T150000Z 全天事件格式： YYYYMMDD/YYYYMMDD (結束日期是 不包含 的那一天的日期，所以通常是開始日期加一天) 範例 (2024年7月27日全天)： &dates=20240727/20240728 location : 行程地點 。 範例： &location=台北101會議室 details : 行程說明或備註 。可以包含換行符號 ( \n )。 範例： &details=討論下一季專案規劃。\n請攜帶筆記型電腦。 sprop : 來源網站資訊 (可選，但建議加入)。 範例： &sprop=name:我的網站名稱&sprop=url:https://www.mywebsite.com add : 邀請的賓客 Email (可選)...
閱讀完整內容

計算 Canvas 文字最大字體

 好的，我將產生一個 HTML 頁面，其中包含一個 Canvas 元素和一個文字輸入框。當你在輸入框中輸入文字並點擊按鈕後，程式碼會自動計算出在指定的 Canvas 寬度內，該文字能夠完整顯示的最大字體大小，並將該字體大小的文字繪製在 Canvas 上。 <html> <head> <title>計算 Canvas 文字最大字體</title> <style> #myCanvas { border: 1px solid black; } </style> </head> <body> <div> <label for="inputText">輸入文字:</label> <input type="text" id="inputText" value="Hello"> </div> <div> <label for="canvasWidth">Canvas 寬度:</label> <input type="number" id="canvasWidth" value="300"> </div> <button id="calculateBtn">計算並繪製</button> <canvas id="myCanvas" width="300" height="100"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); const inputText = document.getElementById('inputText...
閱讀完整內容