Embeer.js Service cacheFor()用法及代碼示例

Ember.js 是一個流行的 JavaScript 框架，用於構建 Web 應用程序。 Ember.js 的一項有用函數是能夠使用服務來管理應用程序不同部分的共享數據和函數。 cacheFor() 方法是 Ember.js 服務上可用的方法，允許您檢索給定鍵的緩存數據。

cacheFor() 方法用於檢索先前使用cache() 方法緩存的數據。 cache() 方法允許您使用給定的鍵將數據存儲在服務的緩存中，而 cacheFor() 方法使用相同的鍵檢索此數據。使用 cache() 和 cacheFor() 方法緩存數據對於存儲計算或檢索成本高昂的數據非常有用，例如來自 API 調用或大型數據集的數據。通過將此數據存儲在服務的緩存中，您可以避免每次需要時重新計算或重新獲取數據，這可以提高應用程序的性能。

用法:

this.cacheFor(key);

參數：

key: 它是我們要設置其值的屬性的名稱。

返回：具有傳遞的鍵值的對象。

第 1 步：要運行以下示例，您需要有一個 ember 項目。要創建一個，您需要先安裝ember-cli。在終端中寫入以下代碼：

npm install ember-cli

第 2 步：現在您可以通過輸入以下代碼來創建項目：

ember new <project-name> --lang en

要啟動服務器，請鍵入：

ember serve

步驟 3：要創建服務，您可以通過運行以下命令來使用 Ember.js 命令行接口 (CLI)：

ember generate service my-service

示例 1：在此示例中，我們有一個服務將有關用戶的數據存儲在其緩存中。該服務具有 getUser() 方法，用於檢索給定用戶 ID 的數據。如果用戶 ID 的數據已被緩存，getUser() 方法將使用 cacheFor() 方法檢索緩存的數據。如果數據不在緩存中，則會從 API 中獲取數據，然後使用 cache() 方法進行緩存。

應用程序/服務/user-service.js

Javascript


import Service from '@ember/service'; 
import { hash } from 'rsvp'; 
  
export default Service.extend({ 
    cache: {}, 
  
    getUser(userId) { 
        let cachedData = this.cacheFor(userId); 
        if (cachedData) { 
            return cachedData; 
        } else { 
            return this.fetchUser(userId).then((data) => { 
                this.cache(userId, data); 
                return data; 
            }); 
        } 
    }, 
  
    fetchUser(userId) { 
        // code to fetch data from an API 
    } 
}); 
  
// app/controllers/user-detail.js 
import Controller from '@ember/controller'; 
  
export default Controller.extend({ 
    userService: Ember.inject.service(), 
  
    actions: { 
        fetchUser() { 
            this.get('userService').getUser(123).then((userData) => { 
                console.log(userData); 
            }); 
        } 
    } 
});

運行應用程序：在終端/命令提示符中輸入以下命令來運行應用程序：

ember serve

輸出：如果調用 fetchUser() 操作並且用戶 ID 123 的數據先前尚未緩存，則輸出可能看起來像這樣。

{ id: 123, name: 'John Smith', email: 'john@example.com' }

如果再次調用 fetchUser() 操作，並且用戶 ID 123 的數據已被緩存，則輸出將與之前相同，但數據將從緩存中檢索，而不是從 API 中獲取。

示例 2：在此示例中，我們有一個服務在其緩存中存儲有關不同產品的數據。該服務具有 getProducts() 方法，用於檢索產品 ID 列表的數據。如果任何產品 ID 的數據已被緩存，getProducts() 方法將使用 cacheFor() 方法檢索緩存的數據。如果數據不在緩存中，則會從 API 中獲取數據，然後使用 cache() 方法進行緩存。

應用程序/服務/product-service.js

Javascript


import Service from '@ember/service'; 
import { hash } from 'rsvp'; 
  
export default Service.extend({ 
    cache: {}, 
  
    getProducts(productIds) { 
        let cachedData = {}; 
        let uncachedIds = []; 
  
        productIds.forEach((id) => { 
            let data = this.cacheFor(id); 
            if (data) { 
                cachedData[id] = data; 
            } else { 
                uncachedIds.push(id); 
            } 
        }); 
  
        if (uncachedIds.length > 0) { 
            return this.fetchProducts(uncachedIds).then((data) => { 
                Object.keys(data).forEach((id) => { 
                    this.cache(id, data[id]); 
                }); 
                return hash(cachedData, data); 
            }); 
        } else { 
            return hash(cachedData); 
        } 
    }, 
  
    fetchProducts(productIds) { 
        // code to fetch data from an API 
    } 
}); 
  
// app/controllers/product-list.js 
import Controller from '@ember/controller'; 
  
export default Controller.extend({ 
    productService: Ember.inject.service(), 
  
    actions: { 
        fetchProducts() { 
            this.get('productService').getProducts( 
                [123, 456, 789]).then((productData) => { 
                    console.log(productData); 
                }); 
        } 
    } 
});

輸出：如果調用“fetchProducts()”操作並且之前未緩存產品 ID 123、456 和 789 的數據，則輸出可能如下所示。

{ 123: { id: 123, name: 'Product 1', price: 19.99 },
456: { id: 456, name: 'Product 2', price: 29.99 },
789: { id: 789, name: 'Product 3', price: 39.99 } }

如果再次調用“fetchProducts()”操作，並且產品 ID 123 和 456 的數據已被緩存，但產品 ID 789 的數據尚未緩存，則輸出可能如下所示。

{ 123: { id: 123, name: 'Product 1', price: 19.99 },
456: { id: 456, name: 'Product 2', price: 29.99 },
789: { id: 789, name: 'Product 3', price: 39.99 } }

產品 ID 123 和 456 的數據將從緩存中檢索，而產品 ID 789 的數據將從 API 中獲取，然後緩存以供將來使用。

參考：https://api.emberjs.com/ember/release/classes/Service

相關用法

注：本文由純淨天空篩選整理自satyamm09大神的英文原創作品 Ember.js Service cacheFor() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。