闪电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。该函数将减少接收到的错误对象，并返回所有已发生错误消息的数组。

注意

reduceErrors本示例中的帮助器功能来自LWC Recipes 示例应用程序的ldsUtils模块。LWC食谱包含以Lightning Web组件实现的常见模式的简单易懂的示例。随时将模块复制到您的项目中，然后使用该功能。 ldsUtilsreduceErrors

处理有线功能上的错误

当使用@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组件添加错误处理。

在accountList.html文件中，在<template>包括的lightning-datatable之后添加以下代码：
```
<template if:true={errors}>
    <p>{errors}</p>
</template>
```
ldsUtils从LWC配方中复制组件，并将其包含在项目的force-app / main / default / lwc文件夹中。该组件包含 reduceErrors功能。
在reduceErrorsaccountList.js开头附近导入函数。
```
import { reduceErrors } from 'c/ldsUtils';
```

在accountList.js中，插入此getter，它定义了一个 errors属性：

get errors() {
    return (this.accounts.error) ?
        reduceErrors(this.accounts.error) : [];
}

要测试错误处理，getAccounts通过注释方法的主体（临时）并在此位置添加以下代码来强制方法（在AccountController.cls中）引发错误：
```
throw new AuraHandledException('Forced error');
```
保存您编辑的三个文件：accountList.html，accountList.js和AccountController.cls。
部署项目文件（来自force-app/main/default）。
如果尚未打开，请打开您的Trailhead Playground。
要检查结果，请刷新“使用数据”页面。
提示：由于Lightning Data Service缓存结果，因此您可能需要清除缓存，然后才能看到强制错误在起作用。

概要

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

与Salesforce数据进行交互的用例

用例	推荐的解决方案	笔记
查看或编辑指定其布局或字段列表的记录	`lightning-record-form`
使用自定义表单布局或记录数据的自定义呈现方式查看记录	`lightning-record-view-form`
使用自定义表单布局，自定义记录数据呈现或预填充字段值来编辑记录	`lightning-record-edit-form`
读取元数据或读取一条记录的数据	LDS电线适配器	可以合并，但操作将在独立事务上运行
创建，编辑或删除一条记录	LDS功能	可以合并，但操作将在独立事务上运行
读取多条记录	致电Apex `@wire`	使用以下注释Apex方法 `cacheable=true`
一次性读取多个记录或修改多个记录	必须致电Apex	对于读取，请使用以下注释Apex方法 `cacheable=true`

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

处理服务器错误

如何处理数据如何访问服务器错误

使用LDS线适配器或Apex方法，并装饰属性使用reduceErrors来处理所返回的有线财产的错误decoratedProperty.error

如何处理数据	如何访问服务器错误
使用LDS线适配器或Apex方法，并装饰属性	使用`reduceErrors`来处理所返回的有线财产的错误`decoratedProperty.error`
使用LDS线适配器或Apex方法，并装饰功能	使用`reduceErrors`来处理在通过有线功能接收对象参数返回错误 `decoratedFunction({data, error}) {...}`
强制调用LDS连线函数或Apex方法	使用`reduceErrors`来处理真实收到的捕捞方法的回调函数中的参数错误 `functionToInvoke() .then(data => {...}) .catch(error => {...});`

使用LDS线适配器或Apex方法，并装饰功能

使用reduceErrors来处理在通过有线功能接收对象参数返回错误

decoratedFunction({data, error}) {...}

强制调用LDS连线函数或Apex方法

使用reduceErrors来处理真实收到的捕捞方法的回调函数中的参数错误

functionToInvoke() .then(data => {...}) .catch(error => {...});

包起来

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

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

学习目标

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

处理连线属性错误

注意

处理有线功能上的错误

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

处理accountList组件中的错误

概要

包起来

你可能也会喜欢...

闪电Web组件和Salesforce数据 – 使用闪电数据服务来处理数据

闪电Web组件和Salesforce数据 – 使用Apex处理数据