Angular 7两次调用asp.net webapi

Question

我的angular 7应用程序出现性能问题。我正在使用angular 7作为客户端和c＃。 asp.net.webapi作为服务器代码。我注意到对webapi端点进行了两次调用，不确定为什么？我注意到的另一件事是，它最初显示7秒，之后显示1.7或1.8秒。为什么这样做

“网络”标签的屏幕截图1

“网络”标签的屏幕截图2

屏幕快照2中显示的图片也与第一次通话相同。我还看到了呼叫类型为computed: { state () { return this.$store.state[this.namespace] }, someGetter () { return this.$store.getters[this.namespace + '/someGetter'] } }, 。那是什么意思

Angular Component服务调用

xhr

角度服务

import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { TermsService } from '../services/terms.service';
import { FundClassesComponent } from './fundClasses/fundClasses.component';
import { TermsStateService } from '../services/terms-state.service';
import { Router, ActivatedRoute } from '@angular/router';
import { FundStrategySelectorComponent } from '../directives/managerStrategySelector';
import { LegalFundClassesComponent } from './fundClasses/legalFundClasses.component';


@Component({
    selector: 'mgr-terms',
    templateUrl: 'terms.component.html'
})


export class TermsComponent implements OnInit {

    private Error: string;
    public TermDetails: any;
    private _ManagerStrategyId: number;
    FilteredClasses: any;
    OriginalList: any;
    Funds: any;
    FundClassType: any;
    FirmFunds: any;
    FundTerms: any;
    recordCount: any;
    Loading: boolean;
    StrategyName: any;
    public get ManagerStrategyId(): number {
        return this._ManagerStrategyId;
    }

    @ViewChild('combo')
    combo: FundStrategySelectorComponent;

    @ViewChild(FundClassesComponent)
    fundClassesComponent: FundClassesComponent;


    @ViewChild(FundClassesComponent)
    legalFundClassesComponent: LegalFundClassesComponent;

    @Input()
    public set ManagerStrategyId(value: number) {
        this._ManagerStrategyId = value;
    }
    FundClasses: any;
    LegalFundClasses: any;
    originalFundClasses: any;
    constructor(private termsService: TermsService, private termsStateService: TermsStateService, private router: Router, private route: ActivatedRoute, ) {

        this.route.params.subscribe(
            params => {
                this.ManagerStrategyId = params['id'];
                this.ngOnInit();
            }
        );
    }

    ngOnInit() {
        this.init();
    }

    init() {
        //this.Loading = true;
        this.getTermsDetails();
    }

    public getFundInvestedDetails(isInvested: boolean) {
        if (isInvested) {
            this.FundClasses = this.TermDetails.FundClassViewModel;
        } else {
            this.FundClasses = this.OriginalList.FundClassViewModel;
        }
    }

    public getLegalFundInvestedDetails(isInvested: boolean) {
        if (isInvested) {
            this.LegalFundClasses = this.TermDetails.LegalFundClassViewModel;

        } else {
            this.LegalFundClasses = this.OriginalList.LegalFundClassViewModel;
        }
    }

    public reset() {
        this.combo.reset();
    }

    public goHome() {
        this.router.navigate([`/home`]);
    }
    public getTermsDetails() {
        if (this.ManagerStrategyId != null) {
            if (this.fundClassesComponent && !this.fundClassesComponent.Load ||
                this.legalFundClassesComponent && this.legalFundClassesComponent.Load) {
                this.Loading = false;
            } else {
                this.Loading = true;
            }

            this.termsService.getTermsDetails(this.ManagerStrategyId).subscribe((data: any) => {
                this.TermDetails = data;
                this.OriginalList = JSON.parse(JSON.stringify(data));

                if (this.TermDetails.FundClassViewModel) {
                    this.FundClasses = this.TermDetails.FundClassViewModel;
                }

                if (this.TermDetails.LegalFundClassViewModel) {
                    this.LegalFundClasses = this.TermDetails.LegalFundClassViewModel;
                }
                if (this.TermDetails.FundTermsViewModel) {
                    this.FundTerms = this.TermDetails.FundTermsViewModel;
                }
                if (this.TermDetails.LegalFundClassViewModel) {
                    if (this.TermDetails.LegalFundClassViewModel.Funds) {
                        this.Funds = this.TermDetails.LegalFundClassViewModel.Funds;
                    }
                    if (this.TermDetails.LegalFundClassViewModel.FundClassType) {
                        this.FundClassType = this.TermDetails.LegalFundClassViewModel.FundClassType;
                    }
                    if (this.TermDetails.LegalFundClassViewModel.FirmFunds) {
                        this.FirmFunds = this.TermDetails.LegalFundClassViewModel.FirmFunds;
                    }
                }
                this.termsStateService.CanEdit = this.TermDetails.CanEdit;
                this.StrategyName = this.TermDetails.FundStrategyName;
                this.termsStateService.CanEditManagerStrategy = this.TermDetails.CanEditManagerStrategy;

                if (this.TermDetails.FundClassViewModel && this.TermDetails.FundClassViewModel) { 
                this.TermDetails.FundClassViewModel.FundDetailsViewModel.forEach(funDetail => {
                    funDetail.FundClassDetailsViewModel = funDetail.FundClassDetailsViewModel
                        .reduce((prev, next) => prev = prev.concat(next), [])
                        .filter(obj => obj.InvestedAmount !== null);
                });
            }

            if( this.TermDetails.LegalFundClassViewModel &&  this.TermDetails.LegalFundClassViewModel.AllTerms) {
                this.TermDetails.LegalFundClassViewModel.AllTerms = this.TermDetails
                    .LegalFundClassViewModel
                    .AllTerms.filter(obj => {
                        for (var prop in obj) {
                            return obj[prop] ? obj[prop].InvestmentStatusId === 1 : null;
                        }
                    });
                }

                this.Loading = false;

            });

        }
    }
}

Angular共享服务

@Injectable()
export class TermsService {
        _searchFilter: string;
        creds = { withCredentials: true }

        constructor(private mgr360CommonService: Manager360CommonService) { }


        getTermsDetails(managerStrategyId: number) {
                return this.mgr360CommonService.httpGet('/api/terms/details/' + managerStrategyId);
              }
  }

Answer 1

第一个通话必须为 OPTION 类型。检查其中的Request方法。

OPTIONS请求是跨域资源共享（CORS）中的飞行前请求。

在特定情况下跨不同来源发出请求时，它们是必需的。

有关更多信息，请访问此link