Я получаю несколько звонков из Angular в Post API в Node

Question

Я пытаюсь записать файл из данных из базы данных, но я получаю несколько вызовов от угла, вызывающих несколько записей одних и тех же данных. Как я могу остановить это?И также это вызывает перезапись файла записи через некоторое время.

Я не понимаю, что именно я должен делать.Я пробовал subscribing вещь в service в угловых, но это не помогло.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { NgbModalRef, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
import { CountryService } from './country.service';
import { ConfigService } from '../config.service';

@Component({
  selector: 'app-country',
  templateUrl: './country.component.html',
  styleUrls: ['./country.component.scss'],
  encapsulation: ViewEncapsulation.None,
  providers: []
})
export class CountryComponent implements OnInit {
  public modalRef: NgbModalRef;
  public form: FormGroup;
  public selectedCountry;
  public countries;
  constructor(public fb: FormBuilder, public toastrService: ToastrService,
    public modalService: NgbModal, public configService: ConfigService,
    public countryService: CountryService) {

  }

  ngOnInit() {
    this.form = this.fb.group({
      country: [null, Validators.compose([Validators.required])],
    });
    this.getCountries();
  }

  public getCountries() {
    this.countryService.getCountries((data) => {
      this.countries = data.countries;
    }, (err) => { });
  }

  public selectCountry(country) {
    this.countryService.selectCountry(country, (resp) => {
    }, (err) => { });
  }
}

service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { ConfigService } from '../config.service';
import { ToastrService } from 'ngx-toastr';

@Injectable({
  providedIn: 'root'
})
export class CountryService {
  private setHeaders() {
    const headers = new HttpHeaders({
      'content-type': 'application/json',
    });
    return headers;
  }
  constructor(private configService: ConfigService, public http: HttpClient, public toastrService: ToastrService) { }

  selectCountry(country: any, callback, errCallback) {
       const options = {
      headers: this.setHeaders(),
    };
    this.http.post(this.configService.url + '/selectedCountry', country, options).subscribe((resp: any) => {
      callback(resp);
    }, err => {
      errCallback(err);
    });
  }

  getCountries(callback, errCallback) {
       const options = {
      headers: this.setHeaders(),
    };
    this.http.get(this.configService.url + '/countries', options).subscribe((resp: any) => {
         callback(resp.msg);
    }, err => {
      errCallback(err);
    });
  }

}

Я хочу, чтобы звонок отправлялся только один раз, а не дважды

Answer 1

Btw.- Пожалуйста, рассмотрите возможность добавления библиотеки NGRX в ваше приложение.

Служба angular считается держателем данных.Так что сделайте там переменную экземпляра.Это может выглядеть так:

export class Service{
  private countries;
  ...
  public getCountries(){
     return this.countries;
  }

  public loadCountries(){
     this.http.get("url").subscribe(countries => this.countries = countries);
  }
}

Тогда в вашем классе компонентов вы просто получите страны.

export class Component{
  public coutries;
  ...
  public ngOnInit(){
    this.countryService.getCountries(countries => this.countries=coutries);
  }
 }

И, наконец, что не менее важно - загрузите страны в свой AppComponent.

export class AppComponent{
  ...
  public ngOnInit(){
     this.countryService.loadCountries();
  }
}

Answer 2

Измените свой метод обслуживания следующим образом:

добавьте интерфейс:

export interface Country{
  id: number;
  name: string;
}

Измените свой метод:

getCountries(): Observable<Country> {
    return this.httpClient
      .get('pass api url here')
      .pipe(
        map((body: any) => body),
        catchError(error => of(error))
      );
  }

В вашем компоненте:

ngOnInit() {
    this.countryService.getCountries().subscribe(
          (result: Countries) => {
            this.countries = result;
          },
          err => {
            log.debug('get countries error', err);
          }
        );
      }
}

Answer 3

Нужен весь ваш код, если вы можете сделать стек стека, и, как сказал Матеуш, лучше обрабатывать состояние с помощью ngrx, если вы не хотите вызывать дважды для бэкэнда, или простой подход - что-то вроде этого https://stackblitz.com/edit/angular-biv6cw.

Answer 4

Попробуйте это:

// Somewhere on init
let postRequestCount = 0;

// More stuff …

// Just before doing the POST request inside the `selectCountry` method
if(postRequestCount < 1) {
    http.post(); // TODO : Replace with the actual `post` method
} 
postRequestCount++;