使用Lightning Web Components开源构建您的第一个应用程序

使用Lightning Web Components开源构建您的第一个应用程序 – 创建数据服务模块

创建数据服务模块

在JavaScript或Web组件应用程序中,有许多访问数据的策略。在此步骤中,您将创建一个简单的数据服务模块,可以将其导入任何Web组件中以检索会议会话列表。该模块使我们可以通过REST服务访问云中托管的示例数据。您可以使用 此链接在浏览器中调用端点来浏览数据。由于数据以JSON格式存储,因此我们的浏览器无法以漂亮的方式呈现信息。

JSON格式的会话数据视图

注意

我们将在本系列的其他项目中探索其他数据访问策略。例如,在本系列的下一个项目中,我们使用REST服务从Salesforce获取会议列表。

要使此数据可用,请创建一个sessionService模块,该模块封装数据访问逻辑以检索会议会话列表。

  1. src/client/modules文件夹中,创建一个名为的新文件夹data
  2. data文件夹中,创建一个名为的文件夹sessionService
  3. sessionService文件夹中,创建一个名为的文件sessionService.js
  4. 在中sessionService.js,如下执行数据服务。
    const URL = 'https://conference-lwc-app.herokuapp.com/api/sessions';
    let sessions = [];
    export const getSessions = () => fetch(URL)
      .then(response => {
        if (!response.ok) {
          throw new Error('No response from server');
        }
        return response.json();
      })
      .then(result => {
        sessions = result.data;
        return sessions;
      });
    export const getSession = sessionId => {
      return sessions.find(session => {
        return session.id === sessionId;
      });
    }

    该 getSession() 函数允许您从缓存的sessions 阵列中检索特定的会话 。创建会话详细信息Web组件时,可以在此项目的后面使用此功能。

  5. 保存sessionService.js文件。

而已!您创建了一个数据服务模块,可用于检索会议应用程序中任何位置的数据。在下一步中,您将创建一个Web组件,该组件使用 sessionService数据服务来显示会议列表。

你可能也会喜欢...