.net - 为什么多次调用 web api 方法

Question

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

Angular 代码

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

网络接口(interface)代码

 [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 是冷的，除非对其进行任何订阅，否则不会进行任何计算。

一旦您调用订阅 或使用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>

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

如果您多次执行 this.service.apiCall()，那么每次您创建一个新的 Observable 时，它与其他的，Observable 不可能被共享

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