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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。