Angular resource() 和 rxResource() API：您需要了解的内容-js教程-PHP中文网

首页

web前端

js教程

Angular resource() 和 rxResource() API：您需要了解的内容

DDD

Jan 04, 2025 am 06:52 AM

Angular resource() and rxResource() APIs: what you need to know

几周前发布的 Angular v19 标志着框架内信号革命的一个重要里程碑，输入、模型、输出和信号查询 API 现已正式升级为稳定版。

但这还不是全部！这个主要版本还引入了旨在进一步推进信号革命的强大新工具：新的资源API。

顾名思义，这个新的资源 API 旨在通过充分利用信号的力量来简化加载异步资源！

重要提示：在撰写本文时，新的资源 API 仍处于实验阶段。这意味着它在变得稳定之前可能会发生变化，因此使用它需要您自担风险。？

让我们深入了解它的工作原理以及它如何简化异步资源的处理！

资源 API

大多数信号 API 都是同步的，但在实际应用中，处理异步资源至关重要，例如从服务器获取数据或实时管理用户交互。

这就是新的资源 API 发挥作用的地方。

使用资源，您可以轻松地通过信号消耗异步资源，从而轻松管理数据获取、处理加载状态，并在相关信号参数发生变化时触发新的获取。

资源( ) 函数

创建资源的更简单方法是使用resource()函数：

import { resource, signal } from '@angular/core';

const RESOURCE_URL = 'https://jsonplaceholder.typicode.com/todos/';

private id = signal(1);

private myResource = resource({
    request: () => ({ id: this.id() }),
    loader: ({ request }) => fetch(RESOURCE_URL + request.id),
});

登录后复制

此函数接受 ResourceOptions 配置对象作为输入，允许您指定以下属性：

请求：一个反应函数，用于确定用于执行对异步资源的请求的参数；
loader：一个加载函数，返回资源值的 Promise，可以选择基于提供的 request 参数。这是 ResourceOptions; 唯一的 必需的
equal：相等函数，用于比较loader的返回值；
injector：覆盖 Resource 实例使用的 Injector，以在父组件或服务被销毁时销毁自身。

借助这些配置，我们可以轻松定义异步依赖项，它将始终被有效使用并保持最新。

资源生命周期

一旦创建了资源，就会执行loader函数，然后生成的异步请求开始：

import { resource, signal } from '@angular/core';

const RESOURCE_URL = 'https://jsonplaceholder.typicode.com/todos/';

private id = signal(1);

private myResource = resource({
    request: () => ({ id: this.id() }),
    loader: ({ request }) => fetch(RESOURCE_URL + request.id),
});

登录后复制

每当有信号表明 request 函数依赖于更改时，request 函数会再次运行，如果返回新参数，则会触发 loader 函数获取更新后的资源值：

import { resource, signal } from "@angular/core";

const RESOURCE_URL = "https://jsonplaceholder.typicode.com/todos/";

const id = signal(1);
const myResource = resource({
  request: () => ({ id: id() }),
  loader: ({ request }) => fetch(RESOURCE_URL + request.id)
});
console.log(myResource.status()); // Prints: 2 (which means "Loading")

登录后复制

如果没有提供 request 函数，则 loader 函数将仅运行一次，除非使用 reload 重新加载 Resource方法（更多下文）。

最后，一旦父组件或服务被销毁，资源也会被销毁，除非提供了特定的注入器。

在这种情况下，资源将保持活动状态，并且仅当提供的注入器本身被销毁时才会被销毁。

使用 abortSignal 中止请求

为了优化数据获取，如果 request() 计算发生变化而先前的值仍在加载，资源可以中止未完成的请求。

为了管理此问题，loader() 函数提供了 abortSignal，您可以将其传递给正在进行的请求，例如 fetch。该请求监听 abortSignal 并在触发时取消操作，确保高效的资源管理并防止不必要的网络请求：

import { resource, signal } from "@angular/core";

const RESOURCE_URL = "https://jsonplaceholder.typicode.com/todos/";

const id = signal(1);
const myResource = resource({
  request: () => ({ id: id() }),
  loader: ({ request }) => fetch(RESOURCE_URL + request.id)
});

console.log(myResource.status()); // Prints: 2 (which means "Loading")

// After the fetch resolves

console.log(myResource.status()); // Prints: 4 (which means "Resolved")
console.log(myResource.value()); // Prints: { "id": 1 , ... }

id.set(2); // Triggers a request, causing the loader function to run again
console.log(myResource.status()); // Prints: 2 (which means "Loading")

// After the fetch resolves

console.log(myResource.status()); // Prints: 4 (which means "Resolved")
console.log(myResource.value()); // Prints: { "id": 2 , ... }

登录后复制

基于此，建议主要针对 GET 请求使用 Resource API，因为它们通常可以安全地取消而不会引起问题。

对于 POST 或 UPDATE 请求，取消可能会导致意想不到的副作用，例如不完整的数据提交或更新。但是，如果您需要针对这些类型的请求提供类似的功能，则可以使用 effect() 方法来安全地管理操作。

如何使用资源

资源 API 为其状态提供了多个信号属性，您可以直接在组件或服务中轻松使用它们：

值：包含资源的当前值，如果没有可用值，则包含未定义。作为WritableSignal，可以手动更新；
状态：包含资源的当前状态，指示资源正在做什么以及可以从其值中得到什么；
错误：如果处于错误状态，则包含资源加载期间引发的最新错误；
isLoading：指示资源是否正在加载新值或重新加载现有值。

以下是如何在组件中使用资源的示例：

import { resource, signal } from '@angular/core';

const RESOURCE_URL = 'https://jsonplaceholder.typicode.com/todos/';

private id = signal(1);

private myResource = resource({
    request: () => ({ id: this.id() }),
    loader: ({ request }) => fetch(RESOURCE_URL + request.id),
});

登录后复制

在此示例中，Resource 用于根据 id 信号的值从 API 获取数据，该信号可以通过单击按钮来递增。

每当用户单击按钮时，id 信号值都会发生变化，从而触发 loader 函数从远程 API 获取新项目。

由于 Resource API 公开的信号属性，UI 会自动使用获取的数据进行更新。

检查资源的状态

如前所述，状态信号提供有关资源在任何给定时刻的当前状态的信息。

status 信号的可能值由 ResourceStatus 枚举定义。以下是这些状态及其相应值的摘要：

空闲 = 0：资源没有有效请求，不会执行任何加载。 value() 是 未定义;
Error = 1：加载失败并出现错误。 value() 是 未定义;
正在加载 = 2：由于请求发生更改，资源当前正在加载新值。 value() 是 未定义;
正在重新加载 = 3：资源当前正在为同一请求重新加载新值。 value()会继续返回之前获取的值，直到重新加载操作完成；
已解决=4：加载完成。 value() 包含加载器数据获取过程返回的值；
Local = 5：该值是通过 set() 或 update() 在本地设置的。 value() 包含手动分配的值。

这些状态有助于跟踪资源的进度，并有助于更好地处理应用程序中的异步操作。

hasValue() 函数

鉴于这些状态的复杂性，资源 API 提供了 hasValue() 方法，该方法根据当前状态返回一个布尔值。

这确保了有关资源状态的准确信息，提供了一种更可靠的方法来处理异步操作，而不依赖于值，该值在某些状态下可能是未定义。

import { resource, signal } from '@angular/core';

const RESOURCE_URL = 'https://jsonplaceholder.typicode.com/todos/';

private id = signal(1);

private myResource = resource({
    request: () => ({ id: this.id() }),
    loader: ({ request }) => fetch(RESOURCE_URL + request.id),
});

登录后复制

此方法是响应式的，允许您像信号一样使用和跟踪它。

isLoading()函数

Resource API 还提供了 isLoading 信号，该信号返回资源当前是否处于 Loading 或 Reloading 状态：

import { resource, signal } from "@angular/core";

const RESOURCE_URL = "https://jsonplaceholder.typicode.com/todos/";

const id = signal(1);
const myResource = resource({
  request: () => ({ id: id() }),
  loader: ({ request }) => fetch(RESOURCE_URL + request.id)
});
console.log(myResource.status()); // Prints: 2 (which means "Loading")

登录后复制

由于 isLoading 是一个计算信号，因此可以对其进行反应式跟踪，从而允许您使用信号 API 实时监控加载状态。

作为 WritableSignal 的资源值

Resource提供的值信号是一个WritableSignal，它允许您使用set()和update()手动更新它) 功能:

import { resource, signal } from "@angular/core";

const RESOURCE_URL = "https://jsonplaceholder.typicode.com/todos/";

const id = signal(1);
const myResource = resource({
  request: () => ({ id: id() }),
  loader: ({ request }) => fetch(RESOURCE_URL + request.id)
});

console.log(myResource.status()); // Prints: 2 (which means "Loading")

// After the fetch resolves

console.log(myResource.status()); // Prints: 4 (which means "Resolved")
console.log(myResource.value()); // Prints: { "id": 1 , ... }

id.set(2); // Triggers a request, causing the loader function to run again
console.log(myResource.status()); // Prints: 2 (which means "Loading")

// After the fetch resolves

console.log(myResource.status()); // Prints: 4 (which means "Resolved")
console.log(myResource.value()); // Prints: { "id": 2 , ... }

登录后复制

注意：如您所见，手动更新信号的值也会将状态设置为5，这意味着“本地”，表示该值是本地设置的。

手动设置的值将持续存在，直到设置新值或执行新请求，这将使用新值覆盖它：

import { resource, signal } from "@angular/core";

const RESOURCE_URL = "https://jsonplaceholder.typicode.com/todos/";

const id = signal(1);
const myResource = resource({
  request: () => ({ id: id() }),
  loader: ({ request, abortSignal }) =>
    fetch(RESOURCE_URL + request.id, { signal: abortSignal })
});

console.log(myResource.status()); // Prints: 2 (which means "Loading")

// Triggers a new request, causing the previous fetch to be aborted
// Then the loader function to run again generating a new fetch request
id.set(2);

console.log(myResource.status()); // Prints: 2 (which means "Loading")

登录后复制

注意： Resource API 的 value 信号使用与新的 LinkedSignal API 相同的模式，但不使用它在引擎盖下。？

便利包装方法

为了简化 value 信号的使用，Resource API 为 set、update 和 update 提供了方便的包装器🎜>asReadonly

方法。

asReadonly 方法特别有用，因为它返回 value

信号的只读实例，仅允许读取访问并防止任何意外修改。

您可以使用此方法通过导出 value
:

的只读实例来创建管理和跟踪资源值更改的服务

import { Component, resource, signal } from '@angular/core';

const BASE_URL = 'https://jsonplaceholder.typicode.com/todos/';

@Component({
  selector: 'my-component',
  template: `
    @if (myResource.value()) {
      {{ myResource.value().title }}
    }

    <button (click)="fetchNext()">Fetch next item</button>
  `
})
export class MyComponent {
  private id = signal(1);

  protected myResource = resource({
    request: () => ({ id: this.id() }),
    loader: ({ request }) =>
      fetch(BASE_URL + request.id).then((response) => response.json()),
  });

  protected fetchNext(): void {
    this.id.update((id) => id + 1);
  }
}

登录后复制

这将防止消费者修改值，降低意外更改的风险，提高复杂数据管理的一致性。

重新加载或销毁资源

使用异步资源时，您可能会遇到需要刷新数据或销毁资源的情况。

为了处理这些场景，资源 API 提供了两种专用方法，为管理这些操作提供有效的解决方案。

重新加载()函数

reload() 方法指示 Resource 重新执行异步请求，确保它获取最新的数据：

import { resource, signal } from '@angular/core';

const RESOURCE_URL = 'https://jsonplaceholder.typicode.com/todos/';

private id = signal(1);

private myResource = resource({
    request: () => ({ id: this.id() }),
    loader: ({ request }) => fetch(RESOURCE_URL + request.id),
});

登录后复制

如果成功启动重新加载，reload() 方法将返回 true。

如果无法执行重新加载，无论是因为没有必要，例如当状态已正在加载或正在重新加载，或不支持，例如当状态为时空闲，该方法返回false.

销毁()函数

destroy() 方法手动销毁 Resource，销毁任何用于跟踪请求更改的 effect()，取消任何待处理的请求，并设置状态为空闲，同时将值重置为未定义:

import { resource, signal } from "@angular/core";

const RESOURCE_URL = "https://jsonplaceholder.typicode.com/todos/";

const id = signal(1);
const myResource = resource({
  request: () => ({ id: id() }),
  loader: ({ request }) => fetch(RESOURCE_URL + request.id)
});
console.log(myResource.status()); // Prints: 2 (which means "Loading")

登录后复制

资源被销毁后，它将不再响应请求更改或reload()操作。

注意：此时，虽然value信号仍然可写，但Resource将失去其预期目的，不再发挥其功能，变得无用。？

rxResource( ) 函数

与迄今为止引入的几乎所有基于信号的 API 一样，资源 API 还提供了一个互操作性实用程序，用于与 RxJS 无缝集成。

您可以使用 rxResource() 方法来创建基于 Promise 的 Resource，而不是使用 resource() 方法来使用 可观察：

import { resource, signal } from "@angular/core";

const RESOURCE_URL = "https://jsonplaceholder.typicode.com/todos/";

const id = signal(1);
const myResource = resource({
  request: () => ({ id: id() }),
  loader: ({ request }) => fetch(RESOURCE_URL + request.id)
});

console.log(myResource.status()); // Prints: 2 (which means "Loading")

// After the fetch resolves

console.log(myResource.status()); // Prints: 4 (which means "Resolved")
console.log(myResource.value()); // Prints: { "id": 1 , ... }

id.set(2); // Triggers a request, causing the loader function to run again
console.log(myResource.status()); // Prints: 2 (which means "Loading")

// After the fetch resolves

console.log(myResource.status()); // Prints: 4 (which means "Resolved")
console.log(myResource.value()); // Prints: { "id": 2 , ... }

登录后复制