角度信号：如何处理 API 请求

Question

所以我对信号很陌生，我正在尝试在我们的应用程序中越来越多地使用它们。我仍然无法理解的部分是 rxJS 和 Signals 之间的连接。因为我们使用的是 Angulars HTTP 客户端，所以我们必须处理可观察数据（这并不是一件坏事）。但现在我试图通过每当作用域对象（信号本身）的 ID 发生变化时执行 API 调用来更新信号值，从而使我的代码更具反应性。这就是我想到的：

 effect(() => {
      this.apiService.hasSomething({
        customerId: mySignalWhoseValueChanges()
      }).subscribe(value => this.mySignal.set(value));
    });

如果我在模板中使用

mySignal()

并更改

mySignalWhoseValueChanges()

，它将调用

effect()

，因为

effect()

监听其中使用的任何信号更改。

问题是，我 100% 确定有更好的方法而不使用

effect()

，但我只是不知道。我尝试使用

toSignal()

但这不起作用，因为它实际上不是引用的信号，而只是创建它时的值，或者我错过了一些东西：

this.mySignal = toSignal(this.apiService.hasSomething({
      customerId: mySignalWhoseValueChanges()
    }))

提前致谢！

Answer 1

您可以非常轻松地将信号与 http 请求结合起来。

只需发出 http 请求，然后使用

this.mySignal.set(someValue)

将结果通过管道传输到信号。

interface Response {
  message: string;
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [HttpClientModule, AsyncPipe],
  template: `
    @if (http$ | async) {
      <div>{{message()}}</div>
    }
  `,
})
export class App {
  message = signal<string>('');

  http$ = this.http
    .get<Response>('http://example.com/endpoint')
    .pipe(tap((response) => this.message.set(response.message)));

  constructor(private readonly http: HttpClient) {}
}