为什么web api方法会被多次调用

Question

我正在从 Angular 调用一个 Web api 方法，如下所示，但是 Web api 方法执行了两次。知道为什么会在这里发生吗？我已经将控制台登录到 Angular 代码中，并确认它从 Angular 调用了一次。但是奇怪的 Web API 方法被执行了两次，就像在线程上运行一样。

角码

 public Createsamples(): Observable<any> {
        var url = this.baseApiUrl + 'Test/Createsamples';
        return this.httpService.post(url, JSON.stringify(obj), { headers: reqHeader, withCredentials: true });
    }

网络 API 代码

 [System.Web.Http.RoutePrefix("api/Test")]
    [EnableCors(origins: "*", headers: "*", methods: "*")]
    public class TestApiController 
    {
       [Route("Createsamples")]
        [System.Web.Http.HttpPost]
        public IHttpActionResult Createsamples()
        {
            TestBO Bo = new TestBO ();
            var result = Bo.Createsamples(obj);
            return Ok(result);
        }
}

Answer 1

您可能正在处理副作用RxJS。

可观察量是冷的，不会进行任何计算，除非对其进行任何订阅。

一旦您调用subscribe或使用，observable | async计算和副作用就会开始（在您的情况下是网络请求）。

为了避免副作用，您需要Observable使用运算符进行共享并在模板上shareReplay(1)重新使用：Observable

// your component code

ngOnInit() {
  this.dataSource$ = this.service.apiCall().pipe(
    shareReplay(1)
  )
}

<!-- On your HTML template -->
<div *ngIf="dataSource$ | async as data">{{data |json }}</div>
<div *ngIf="dataSource$ | async as data">{{data |json }}</div>

尽管从技术上讲，此代码段中有两个订阅，但由于我们进行了Observable共享，因此您应该只看到 1 个网络请求，并且应该重新使用其结果。

如果您执行this.service.apiCall()多次，那么每次您创建的新内容Observable都与其他内容无关，并且无法Observable共享

您可以在此处阅读有关共享 Observables 和避免副作用的更多信息