为什么多次调用 web api 方法

Question

我正在从 angular 调用网络 api 方法，但网络 api 方法执行了两次 times.Any 知道为什么会发生在这里。我已经在 origin 中放置了一个控制台日志，angular 代码并确认它从 angular.BUt 调用了一次奇怪的网络 api 方法执行了两次，比如运行线程。

Angular代码

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

Observable 是冷的，除非对其进行任何订阅，否则不会进行任何计算。

一旦您调用 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>

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

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

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

为什么多次调用 web api 方法

Why web api methods are called multiple times

.net

angular

asp.net-web-api

visual-studio-2017