分类： 闪电Web组件和Salesforce数据

学习目标

完成本单元后，您将能够：

• 说明连接属性时如何处理服务器错误。
• 说明如何处理在连接功能时发生的服务器错误。
• 说明如何处理在调用LDS函数或强制性Apex时发生的服务器错误。
• 确定推荐的与数据交互并处理特定用例错误的方式。

处理闪电Web组件中的服务器错误

LDS线适配器，LDS功能和对Apex的调用引发的错误具有特定的结构。要检索有关错误的信息，请在JavaScript代码中处理错误响应。然后，您可以向用户显示错误的内容。

作为开发人员，您可以决定如何向用户显示错误：错误面板，祝酒消息或其他内容。出于学习目的，此模块中的示例通过引用errors标记中的属性来显示错误，如下所示：

errors.html

<template>
    <template if:true={errors}>
        <p>{errors}</p>
    </template>
</template>

如何使用JavaScript处理服务器错误取决于您如何交互Salesforce数据。让我们探索三个示例：有线属性，有线功能和命令式调用。

处理连线属性错误

当您使用@wire装饰的属性，错误是在属性访问error属性。当@wire与LDS线适配器或Apex一起使用时，此设置有效 。

wireApexProperty.js

import { LightningElement, api, wire } from 'lwc';
import { reduceErrors } from 'c/ldsUtils';
import getRelatedContacts from '@salesforce/apex/AccountController.getRelatedContacts';
export default class WireApexProperty extends LightningElement {
    @api recordId;
    @wire(getRelatedContacts, { accountId: '$recordId' })
    contacts;
    get errors() {
        return (this.contacts.error) ?
            reduceErrors(this.contacts.error) : [];
    }
}

代码重点：

• 第2行：我们reduceErrors 从ldsUtils模块导入了 辅助函数。（您ldsUtils稍后将在本单元中将模块添加 到项目中。）
• 第6-7行：装饰contacts属性以 @wire将其连接到 getRelatedContacts函数。
• 第8行：我们定义了一个getter函数，该函数创建一个名为的属性 errors。每次this.contacts.error更改时，getter都会更新errors属性的值。发生这种情况是由于 反应性。
• 第10行：在getter中，我们使用reduceErrorshelper函数来格式化this.contacts.error。该函数将减少接收到的错误对象，并返回所有已发生错误消息的数组。

处理有线功能上的错误

当使用@wire装饰的函数，该函数作为参数接收的对象，其包括错误（如果有任何错误）。当@wire与LDS线适配器或Apex一起使用时，这适用。

wireApexFunction.js

import { LightningElement, api, wire } from 'lwc';
import { reduceErrors } from 'c/ldsUtils';
import getRelatedContacts from '@salesforce/apex/AccountController.getRelatedContacts';
export default class WireApexFunction extends LightningElement {
    @api recordId;
    errors;
    @wire(getRelatedContacts, { accountId: '$recordId' })
    wiredContacts({data, error}) {
        if (error)
            this.errors = reduceErrors(error);
    }
}

代码重点：

• 第2行：我们reduceErrors从ldsUtils模块中导入了辅助函数 （就像在wireApexProperty示例中所做的那样）。
• 第三行：我们getRelatedContacts从AccountController类中导入函数 。
• 第6行：我们定义errors属性。
• 第7–8行：装饰wiredContacts函数以 @wire将其连接到 getRelatedContacts函数。
• 第10行：每次有线函数接收到错误时，我们都会使用 reduceErrorshelper函数对其进行格式化。该函数返回所有已发生错误的数组。

强制调用函数时的错误处理

如果必须强制调用LDS函数或Apex方法，则服务器会将错误作为参数返回到catch方法的回调函数。

callApexImperative.js

import { LightningElement, api, wire } from 'lwc';
import { reduceErrors } from 'c/ldsUtils';
import getRelatedContacts from '@salesforce/apex/AccountController.getRelatedContacts';
export default class CallApexImperative extends LightningElement {
    @api recordId;
    errors;
    handleButtonClick() {
        getRelatedContacts({
            accountId: '$recordId'
        })
            .then(contacts => {
                // code to execute if the promise is resolved
            })
            .catch(error => {
                this.errors = reduceErrors(error); // code to execute if the promise is rejected
            });
    }
}

代码重点：

• 第2行：我们导入了reduceErrors辅助函数。
• 第6行：我们定义了一个名为的属性errors。
• 第8行：我们getRelatedContacts强制调用该函数。该函数返回一个promise。
• 第11-13行：如果诺言得以兑现，我们将进行处理contacts。
• 第14-16行：如果承诺被拒绝，我们将使用 reduceErrorshelper函数来格式化接收到的错误并将其存储在errors属性中。

处理accountList组件中的错误

让我们向您创建的accountList组件添加错误处理。

1. 在accountList.html文件中，在<template>包括的lightning-datatable之后添加以下代码：

   <template if:true={errors}>
       <p>{errors}</p>
   </template>
2. ldsUtils从LWC配方中 复制组件， 并将其包含在项目的force-app / main / default / lwc文件夹中。该组件包含 reduceErrors功能。
3. 在reduceErrorsaccountList.js开头附近导入函数。

   import { reduceErrors } from 'c/ldsUtils';
4. 在accountList.js中，插入此getter，它定义了一个 errors属性：

   get errors() {
       return (this.accounts.error) ?
           reduceErrors(this.accounts.error) : [];
   }
5. 要测试错误处理，getAccounts通过注释方法的主体（临时）并在此位置添加以下代码来强制方法（在AccountController.cls中）引发错误：

   throw new AuraHandledException('Forced error');
6. 保存您编辑的三个文件：accountList.html，accountList.js和AccountController.cls。
7. 部署项目文件（来自force-app/main/default）。
8. 如果尚未打开，请打开您的Trailhead Playground。
9. 要检查结果，请刷新“使用数据”页面。
   提示：由于Lightning Data Service缓存结果，因此您可能需要清除缓存，然后才能看到强制错误在起作用。

概要

现在，您知道了与Lightning Web组件中的Salesforce数据进行交互的几种方法。在某些情况下，某些解决方案优于其他解决方案。下表按用例总结了推荐的解决方案。

与Salesforce数据进行交互的用例

当您在Lightning Web组件中使用数据时，错误处理会有所不同。您如何访问错误取决于您如何与数据进行交互。

处理服务器错误

包起来

在本模块中，您了解了在Lightning Web组件中使用Salesforce数据的不同方法。您了解了每种技术的优缺点，何时推荐每种技术以及如何实现每种解决方案。您还根据与Salesforce数据的交互方式学习了如何处理Lightning Web组件中的服务器错误。

要继续了解有关在Lightning Web组件中使用Salesforce数据的知识，请查看此模块中提供的资源。另外，请参阅《 快速入门：探索食谱示例应用程序》， 以获取更多示例和实现它们的代码。

学习目标

完成本单元后，您将能够：

• 识别何时需要使用Apex处理Salesforce数据。
• 用两种不同的方式呼叫Apex。
• 使用Apex和lightning-datatable处理记录列表。

闪电Web组件中的Apex

我们已经介绍了Lightning Data Service的好处以及如何使用它，但是有时，lightning-record-*-form组件或LDS线适配器和功能都不适合特定的用例。例如，当您要自定义单记录数据事务或对单个事务执行多记录操作时，Apex是最佳选择。

将Apex方法与Lightning Web Components一起使用

在闪电网络组件使用的顶点方法必须是static， public或者global，并用注释 @AuraEnabled立即方法定义之前。该 @AuraEnabled注释使其可闪电部件（两个闪电Web组件和Aura组件）的顶点方法。

允许框架缓存数据可消除重复的服务器调用，从而使以后的读取操作运行更快。通过cacheable = true在@AuraEnabled批注中进行设置，我们将方法标记为可缓存 。当@AuraEnabled方法是可缓存的时，不允许进行数据操作语言（DML）操作。在此示例的第2行中，我们使getRelatedContacts方法可缓存。

AccountController.cls

public with sharing class AccountController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getRelatedContacts(Id accountId) {
        return [
            SELECT Name, Title, Email, Phone
            FROM Contact
            WHERE AccountId = :accountId
            WITH SECURITY_ENFORCED
       ];
    }
}

当方法是可缓存的时，直到刷新缓存后，才会返回新添加或更改的记录版本。在下一节中了解如何手动刷新缓存。

从LWC调用Apex方法

与Lightning Web组件中的Apex方法进行交互的方法有两种：连接方法或强制调用方法。让我们考虑两种方法。

使用@wire致电Apex

要连接Apex方法，该方法必须是可缓存的。要连线可缓存的Apex方法，请使用@wire装饰器（与使用LDS连线适配器的方式相同）。以这种方式调用Apex会将控件委派给Lightning Web Components引擎并创建响应式服务。每次传递给Apex方法的参数值更改时，Apex方法都会将新值提供给修饰的属性或函数。由于有线方法必须是可缓存的，因此数据可以来自LDS缓存或服务器。要刷新Apex方法缓存的数据，请调用 refreshApex 函数。

注意： Lightning Data Service无法识别Apex方法缓存的数据。当LDS函数更新记录时，该更新对Apex方法缓存的数据没有影响。

这是@wire用于调用Apex的示例。此代码获取帐户的相关联系人。

wireApexProperty.js

import { LightningElement, api, wire } from 'lwc';
import getRelatedContacts from '@salesforce/apex/AccountController.getRelatedContacts';
export default class WireApexProperty extends LightningElement {
    @api recordId;
    @wire(getRelatedContacts, { accountId: '$recordId' })
    contacts;
}

代码重点：

• 第2行：我们getRelatedContacts从AccountControllerApex类导入函数 。这指向相应的Apex方法。
• 第4行：我们定义了一个@api recordId属性，以便FlexiPage将当前记录的ID传递给组件。
• 第5行：@wire装饰器收到两个参数：我们要调用的Apex方法（getRelatedContacts）和适配器需要的参数（accountId）。我们将其$recordId作为反应变量传递 （以开头 $）。
• 第6行：结果存储在contacts属性中。
• 第5至6行：最初，Apex方法将数据置备给 contacts属性，并将该数据存储在LDS缓存中。由于$recordId是反应型的，因此每次其值更改时，Apex方法都会从缓存或服务器中配置新数据。

紧急呼叫Apex

调用Apex的另一种方法@wire是强制性地调用Apex。当您需要控制读取操作的调用以及修改记录时，必须强制调用Apex。要强制调用Apex，请一次从组件的JavaScript文件中调用Apex，而不是将控件委派给Lightning Web Components引擎。作为回报，您将获得JavaScript承诺（就像您必须强制调用LDS函数时所做的那样）。

您可以强制调用可缓存和不可缓存的Apex方法。要刷新可缓存方法的缓存，请再次调用该方法。

在callApexImperative.js示例中，当用户单击 lightning-button.html文件（未显示）中的a时， handleButtonClick将getRelatedContacts强制调用Apex方法。

callApexImperative.js

import { LightningElement, api, wire } from 'lwc';
import getRelatedContacts from '@salesforce/apex/AccountController.getRelatedContacts';
export default class CallApexImperative extends LightningElement {
    @api recordId;
    handleButtonClick() {
        getRelatedContacts({ //imperative Apex call
            accountId: '$recordId'
        })
            .then(contacts => {
                //code to execute if related contacts are returned successfully
            })
            .catch(error => {
                //code to execute if related contacts are not returned successfully
            });
    }
}

代码重点：

• 第2行：我们getRelatedContacts从AccountController类中导入函数 。
• 第4行：我们定义了一个公共recordId属性，以便FlexiPage可以传递该组件正在为其显示相关联系人的帐户的ID。
• 第6-7行：当handleButtonClick框架调用该getRelatedContacts方法时，我们必须强制调用Apex方法，并传递accountId方法需要获取正确客户的相关联系人的。
• 第9-14行：第6行中的命令式Apex调用返回了一个promise。如果Apex方法调用成功，则实现诺言并then运行该 方法。否则，承诺将被拒绝，该 catch方法将运行。

在Lightning Web组件中使用记录列表的首选方法是使用 基本组件。使用创建表格数据的功能，如无限滚动，内联编辑，标题和行级的动作，调整大小，等等。该UI组件需要提供数据。生成该数据的最常见方法是以本模块前面介绍的任何一种方式调用Apex。 lightning-datatablelightning-datatable

部署在表中列出记录的Lightning Web组件

让我们来看一个示例，该示例在中显示现有帐户的列表 lightning-datatable。我们将使用Apex并@wire检索记录。

1. 创建一个名为的Apex类AccountController：
   1. 在“资源管理器”窗格中，右键单击classes文件夹，然后选择SFDX：Create Apex Class。
   2. 输入班级名称，AccountController然后按 Enter。
   3. 再次 按Enter接受默认目录。
2. 用以下代码替换AccountController类的内容：

   public with sharing class AccountController {
       @AuraEnabled(cacheable=true)
       public static List<Account> getAccounts() {
           return [
               SELECT Name, AnnualRevenue, Industry
               FROM Account
               WITH SECURITY_ENFORCED
               ORDER BY Name
           ];
       }
   }

   代码重点：

   • 第2行：我们使用注释方法， @AuraEnabled(cacheable=true)以便将结果缓存。
   • 第3行：我们getAccounts在Apex中定义了方法，以执行读取操作并检索现有帐户。
3. 创建名为的Lightning Web组件accountList。
4. 用以下代码替换accountList.js文件的内容：

   import { LightningElement, wire } from 'lwc';
   import NAME_FIELD from '@salesforce/schema/Account.Name';
   import REVENUE_FIELD from '@salesforce/schema/Account.AnnualRevenue';
   import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
   import getAccounts from '@salesforce/apex/AccountController.getAccounts';
   const COLUMNS = [
       { label: 'Account Name', fieldName: NAME_FIELD.fieldApiName, type: 'text' },
       { label: 'Annual Revenue', fieldName: REVENUE_FIELD.fieldApiName, type: 'currency' },
       { label: 'Industry', fieldName: INDUSTRY_FIELD.fieldApiName, type: 'text' }
   ];
   export default class AccountList extends LightningElement {
       columns = COLUMNS;
       @wire(getAccounts)
       accounts;
   }

   代码重点：

   • 第2至4行：与前面的示例一样，我们导入字段引用。
   • 第5行：我们getAccounts从AccountController类导入函数。
   • 第13行：我们@wire与 getAccounts函数一起使用来检索数据。
   • 第14行：我们将结果存储在accounts属性中。如果操作成功，则可以在上访问记录 accounts.data。如果失败，则错误出现在中 accounts.error。
5. 用以下代码替换accountList.html文件的内容：

   <template>
       <lightning-card>
           <template if:true={accounts.data}>
               <lightning-datatable
                   key-field="Id"
                   data={accounts.data}
                   columns={columns}
               >
              </lightning-datatable>
           </template>
       </lightning-card>
   </template>

   代码重点：

   • 行4-9：我们定义的lightning-datatable基础组件使用accounts.data和columns被JavaScript文件中填充。
6. 保存您的AccountController类。
7. 使用以下代码替换accountList.js-meta.xml的内容，以便该组件可在应用程序页面上使用：

   <?xml version="1.0" encoding="UTF-8"?>
   <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
       <apiVersion>48.0</apiVersion>
       <isExposed>true</isExposed>
       <targets>
           <target>lightning__AppPage</target>
       </targets>
   </LightningComponentBundle>
8. 保存所有三个组件文件。
9. 将force-app / main / default文件夹部署到您的Trailhead Playground。
10. 在您的Trailhead游乐场中，导航到Lightning App Builder，然后打开“使用数据”页面。
11. 将accountList组件拖到页面的主要区域。
12. 保存页面。
13. 返回“使用数据”页面以查看新组件。

现在，您知道了与Lightning Web组件中的Salesforce数据进行交互的几种方法。接下来，您将学习如何在发生服务器错误时进行处理。

学习目标 

完成本单元后，您将能够：

• 构建包含lightning-record-*-form基础组件的解决方案。
• 使用闪电数据服务（LDS）线适配器读取数据。
• 使用LDS功能修改数据。

如果这是您首次尝试Lightning Web Components，请等待。退后一步。在完成本模块之前，请确保您完成了 Lighthead Web Components基础知识 模块，并且 在Trailhead上了解了如何使用JavaScript。您在此处所做的工作基于此处的概念和工作。

在Lightning Web Components中使用数据

在Lightning Web组件中，有几种使用Salesforce数据的方法。知道针对特定用例使用哪种解决方案，可使您编写更少的代码，更简单的代码以及更易于维护的代码。针对每种情况使用最佳解决方案还可以提高组件和应用程序的性能。

在本模块中，您将学习何时以及如何使用不同的解决方案。我们将首先审查最简单但可定制性最少的选项。稍后，我们考虑更复杂和更可定制的选项。

使用Lightning数据服务处理数据

Lightning Data Service是使用Salesforce数据的首选（也是最简单）方式。借助Lightning Data Service，开发人员可以使用JavaScript将组件连接到Salesforce数据。

Lightning Data Service还通过对安全的用户界面API端点进行服务器调用来提供安全性。通过在所有组件之间使用客户端共享缓存，Lightning Data Service可以最大化性能。缓存记录时，将从缓存中检索记录，从而消除了对服务器的不必要调用。

Lightning Data Service在整个应用程序生命周期内跨多个组件和客户端维护一致的最新数据。如果多个组件使用Lightning Data Service处理记录，并且其中一个更新记录，则其他组件将自动反映该更新。

在以下各节中，我们重点介绍了使用Lightning Data Service处理Salesforce数据的不同方法。

使用记录表单基础组件读取或修改数据

在Lightning Web组件中使用单个记录的最简单方法是使用这些lightning-record-*-form组件。这些基本组件在后台使用Lightning Data Service，并继承其缓存和同步功能。每个基本组件都为您提供了不同的功能和自定义级别。

• lightning-record-form基本组件是最简单的组件。使用lightning-record-form，您可以指定布局，并允许管理员声明性地配置表单字段。您还可以指定字段的有序列表，以编程方式定义显示的内容。lightning-record-form允许您查看和编辑记录。
• lightning-record-view-form基本组件使您可以查看记录。
• lightning-record-edit-form基本组件允许您编辑记录。

选择lightning-record-view-form或者lightning-record-edit-form当你需要自定义表单布局，预填充字段值，或变更记录数据的呈现方式。

这是lightning-record-form用于创建帐户的示例。

accountCreator.html

<template>
    <lightning-card>
        <lightning-record-form
            object-api-name={objectApiName}
            fields={fields}
            onsuccess={handleSuccess}>
        </lightning-record-form>
    </lightning-card>
</template>

accountCreator.js

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import REVENUE_FIELD from '@salesforce/schema/Account.AnnualRevenue';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
export default class AccountCreator extends LightningElement {
    objectApiName = ACCOUNT_OBJECT;
    fields = [NAME_FIELD, REVENUE_FIELD, INDUSTRY_FIELD];
    handleSuccess(event) {
        const toastEvent = new ShowToastEvent({
            title: "Account created",
            message: "Record ID: " + event.detail.id,
            variant: "success"
        });
        this.dispatchEvent(toastEvent);
    }
}

代码重点：

accountCreator.html 

• 第3行：通过lightning-record-form在标记中使用，我们可以获得Lightning Data Service提供的所有安全性和性能优势。当lightning-record-form未指定时recordId，它将以edit模式运行，并在提交时创建一条记录。
• 第4行：绑定object-api-name属性指示要加载的对象的类型。
• 第5行：绑定fields属性指示要在表单中显示的字段。
• 第6行：我们设置handleSuccess为success事件的处理程序。

accountCreator.js 

• 第3至6行：在文件的开头，我们导入对Account对象及其字段的引用。以这种方式引用对象和字段可确保引用完整性。Salesforce会验证对象和字段是否存在，防止它们被删除，并确保它们包含在引用该组件的变更集和程序包中。导入对象和字段引用可确保如果重命名对象或字段，组件代码仍然可以正常工作。
• 第10行：我们为handleSuccess事件定义事件处理程序success。handleSuccess保存操作成功时执行。
• 第11至17行：我们通过firing显示一条敬酒消息ShowToastEvent，其中event.detail.id是id对新创建的记录的属性的引用。

如果您需要的自定义功能超出了lightning-record-*-form组件提供的功能，则可以使用电线适配器或JavaScript函数直接调用Lightning Data Service。 

使用LDS线适配器读取数据

LDS线适配器 是使用Salesforce数据的另一种方法。使用有线适配器读取Salesforce数据（记录）和元数据（布局详细信息，对象上的字段，等等）。要使用它们，请用装饰一个属性或函数@wire 并指定电线适配器。

LDS有线适配器首先检查LDS缓存，并仅在需要时才从服务器请求数据。适配器会相应地更改和刷新数据。例如，当参数值更改或其他组件修改了Lightning Data Service缓存中的数据时，适配器会将新数据置备到有线属性或功能。

我们来看一个使用getRecord线适配器的示例 。

wireGetRecordProperty.js

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
export default class WireGetRecordProperty extends LightningElement {
    @api recordId;
    @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_NAME_FIELD] })
    account;
}

代码重点：

• 第2行：我们导入getRecord电线适配器。
• 第3行：就像在accountCreator示例中所做的一样，我们导入对该Account.Name字段的引用。（在第6行中，我们用它告诉getRecord电线适配器要检索的字段。）
• 第5行：将wireGetRecordProperty组件放置在记录页面上时，@api recordId让父组件（ FlexiPage）将当前记录的ID传递给该组件。
• 第6行：要关联account属性，我们应用@wire装饰器并指定要调用的关联适配器（getRecord），以及适配器所需的参数（recordId和fields）。
• 第7行：电线适配器为account属性设置了一个值流，该值流将被多次设置。如果检索到一条记录，则将其存储在中account.data。如果记录检索失败，则错误存储在中 account.error。
• 第6-7行：第一次将值分配给recordId属性时，有线适配器从服务器获取数据，并将其存储在LDS缓存中以备将来访问。通过将recordId参数作为带有$前缀的字符串传递，我们可以进行recordId反应。每次recordId更改值时，有线适配器都会从缓存或服务器中获取新数据。如果另一个组件修改了缓存的记录，则有线适配器将记录的新值分配给account属性。

wireGetRecordProperty是装饰属性的示例。我们可以 用相同的方式装饰一个函数。当您要对返回的记录执行一些逻辑时，这很有用。这是前面的示例（wireGetRecordProperty），其经过重新设计以连接函数（wiredAccount）而不是属性。

wireGetRecordFunction.js

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
export default class WireGetRecord extends LightningElement {
    @api recordId;
    data;
    error;
    @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_NAME_FIELD] })
    wiredAccount({data, error}) {
        console.log('Execute logic each time a new value is provisioned');
        if (data) {
            this.data = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.data = undefined;
        }
    }
}

代码重点：

• 第8-9行：我们不是装饰属性，而是装饰wiredAccount函数。该函数接收具有两个属性的对象作为参数：data和error。我们使用对象 ES6解构 来解压缩对象属性。
• 第11-17行：由于LDS线适配器不是提供单个值而是提供值流，因此wiredAccount可以多次调用该函数。结果，有线功能必须重置其影响的状态。因此，在这里，在第11至17行中，如果有线适配器提供了新数据，我们会将数据存储在data属性中，并将error属性设置为undefined。另外，如果有错误，我们会将错误存储在error属性中，并将data属性设置为undefined。

使用LDS功能修改数据

LDS线适配器非常适合读取数据，但是要创建，更新或删除记录，您需要LDS功能。请注意，尽管Lightning Web Components引擎调用了有线适配器，但是您必须强制调用函数。当创建，更新或删除记录时，LDS功能会通知LDS缓存。考虑以下示例，该示例使用createRecord LDS函数创建帐户记录。

ldsCreateRecord.js

import { LightningElement} from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
export default class LdsCreateRecord extends LightningElement {
    handleButtonClick() {
        const recordInput = {
            apiName: ACCOUNT_OBJECT.objectApiName,
            fields: {
                [ACCOUNT_NAME_FIELD.fieldApiName] : 'ACME'
            }
        };
        createRecord(recordInput)
            .then(account => {
                // code to execute if create operation is successful
            })
            .catch(error => {
                // code to execute if create operation is not successful
            });
    }
}

代码重点：

• 第2行：导入createRecordLDS功能。
• 第3至4行：导入Account对象和Account.Name字段（与前面的示例一样），以确保引用完整性。
• 第6行：我们将handleButtonClick方法定义为事件处理程序。它响应用户单击lightning-button.html文件（未显示）中的a时发生的事件。当handleButtonClick被调用时，它将createRecord强制调用该函数。
• 第10行：我们的事件处理程序为该Account.Name字段传递了一个字符串，适配器需要使用该字符串来创建一个新帐户。
• 第13行：当我们强制性地调用LDS函数时，它将返回一个promise（简化执行异步调用的JavaScript对象）。
• 第14至16行：在then方法中，我们定义了成功创建帐户后会发生的情况。
• 第17-19行：在catch方法中，我们定义了如果帐户创建失败将发生的情况。

注意：  LDS功能仅允许您处理单个记录。尽管可以在同一组件中使用多个功能（例如，在同一操作中创建两种不同类型的记录），但是每个功能都在其自己的独立事务上运行。因此，没有通用的回滚逻辑。如果需要合并的DML操作进行事务处理，请考虑使用Apex。

要了解有关LDS电线适配器和功能以及如何使用它们的更多信息，请访问Lightning Web Components开发人员指南和Salesforce开发人员博客。

部署创建帐户的Lightning Web组件

现在，我们已经研究了使用Lightning Data Service的不同方法，下面我们来看一个示例。

在你开始之前

我们假设您已经设置了Salesforce DX开发环境，并且可以轻松地使用它来创建Lightning Web组件并将其部署到组织中。如果您还不熟悉此过程，请完成“快速入门：Lightning Web Components”项目。

创建一个新的Trailhead游乐场

对于此项目，您需要创建一个新的Trailhead Playground。滚动到该页面的底部，单击“启动”旁边的向下箭头，然后选择“创建Trailhead游乐场”。创建新的Trailhead游乐场通常需要3-4分钟。

注意： 是的，我们的意思是全新的Trailhead游乐场！如果您使用现有的组织或游乐场，则可能会遇到无法完成挑战的问题。

获取您的Trailhead Playground用户名和密码

转到您的Trailhead游乐场。（如果尚未打开，请滚动至该页面的底部，然后单击启动。）如果您在组织中看到一个标签为Get Your Login Credentials的标签，太好了！跳至步骤1。 

否则，请从应用启动器（）中找到并打开Playground Starter， 然后按照以下步骤操作。如果您没有看到Playground Starter应用程序，请在Trailhead帮助中签出查找Trailhead Playground的用户名和密码。

1. 单击获取您的登录凭据 选项卡，并记下您的用户名。
2. 单击重置我的密码。这会将电子邮件发送到与您的用户名关联的地址。
3. 单击电子邮件中的链接。
4. 输入新密码，确认，然后单击更改密码。

准备好动手了吗？我们走吧。

在本练习中，您将Lightning Web组件添加到项目中，然后将其部署到Trailhead Playground。 

1. 创建一个新项目：
   1. 打开Visual Studio代码。
   2. 打开命令面板：单击查看| 命令面板。
   3. 在命令面板中，选择SFDX：创建项目。
      如果您没有在列表中看到它，请键入SFDX: Create Project，然后按Enter。
   4. 接受标准模板。
   5. 输入项目名称，workingWithDataInLWC然后按Enter。
   6. 选择新项目的位置，然后单击“创建项目”。
2. 授权您的Trailhead游乐场：
   1. 在命令选项板中，选择（或输入）SFDX：授权组织。
   2. 选择生产：login.salesforce.com，然后按Enter。
   3. 对于别名，请输入lwc_and_salesforce_data，然后按Enter。
   4. 使用您的Trailhead Playground用户名和密码登录。
   5. 登录到Trailhead Playground后，将其保持打开状态并返回到Visual Studio Code。
3. 创建一个闪电Web组件：
   1. 在“资源管理器”窗格中，右键单击lwc文件夹，然后选择“ SFDX：创建闪电Web组件”。
   2. 输入组件名称，accountCreator然后按Enter键。
   3. 再次按Enter接受默认目录。
4. 用 本单元前面的“使用记录表单基础组件读取或修改数据”部分中提供的代码替换accountCreator.html和accountCreator.js文件的内容。
5. 要使此组件在组织中的应用程序页面上可用，请使用以下代码替换accountCreator.js-meta.xml文件的内容：

   <?xml version="1.0" encoding="UTF-8"?>
   <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
       <apiVersion>48.0</apiVersion>
       <isExposed>true</isExposed>
       <targets>
           <target>lightning__AppPage</target>
       </targets>
   </LightningComponentBundle>
6. 保存三个文件：accountCreator.html，accountCreator.js和accountCreator.js-meta.xml。
7. 将项目文件部署到您的Trailhead Playground。（右键单击accountCreator文件夹，然后选择“ SFDX：将源部署到组织”。）
8. 如果您的Trailhead Playground尚未打开，请打开它。（在命令选项板中，选择（或输入）  SFDX：Open Default Org）。
9. 在您的Trailhead游乐场中，单击 ，然后选择设置。
10. 在“快速查找”框中，输入Lightning App Builder，然后选择Lightning App Builder。
11. 创建一个闪电页面：
    1. 点击新建。
    2. 选择应用程序页面 ，然后单击下一步。
    3. 对于标签，输入Working with Data，然后单击下一步。
    4. 对于布局，选择Header和Left Sidebar。
    5. 点击完成。
12. 将accountCreator组件拖到页面侧栏。
13. 保存页面。
14. 激活页面：保留默认的应用名称（使用数据），然后点击保存。
15. 当提示您将页面添加到导航菜单时，点击完成。
16. 打开新页面：在App Launcher搜索中，输入work，然后选择使用数据。

而已。您具有一个Lightning Web组件，该组件用于lightning-record-form在“使用数据”页面上创建帐户记录。使用Lightning Data Service是在Lightning Web组件中使用Salesforce数据的一种方法。在下一单元中，您将学习如何使用Apex处理数据。