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

Question

我正在从 angular 调用如下所示的 web api 方法，但是 web api 方法执行了两次。知道为什么会在这里发生。我已经在原点放置了一个控制台日志，角度代码并确认它是从角度调用一次。但是奇怪的 web api 方法被执行了两次，就像在线程上运行一样。

角度代码

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

网页接口代码

 [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 的副作用。

Observables 是冷的，除非有任何订阅，否则不会进行任何计算。

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

为了避免副作用，您需要使用shareReplay(1) 运算符共享Observable，并在模板上重新使用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>

尽管从技术上讲，此 sn-p 中有两个订阅，但由于我们共享了 Observable，您应该只会看到 1 个网络请求，并且应该重复使用它的结果。

如果你多次执行this.service.apiCall()，那么每次你创建一个新的Observable，它与其他人没有任何关系，并且Observable 不可能被共享

You can read more about sharing Observables and avoiding side-effects here