时间戳

首页 > 解决方案 > 为什么 web api 方法被多次调用

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

问题描述

我正在从角度调用如下所示的 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);
        }
}

标签： .netangularasp.net-web-apivisual-studio-2017

解决方案

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

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

一旦你调用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被共享

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

推荐阅读