Http-запрос выполняется два раза в angular 7

Question

Я делаю вызов API на свой сервер. Это код компонента

formData(username:string, password:string) {
    if (username == "" || password == "") {
        this.message = "Fields are empty";
      } else {
      this.loginservice.login(username,password).subscribe(heroes => this.serverRes = heroes);
    }
}

Это код услуги

login(username:string,password:string): Observable<any> {
    console.log('loginService','called');
    return of(this.http.post<any>(this.configUrl,
        {
            "username": username,
            "password": password,
        }));      
}

Я не знаю, почему он делает вызовы API дважды. Первый запрос API без тела запроса, а второй запрос API с телом запроса.

Answer 1

Почему вы возвращаете of вашей функции почты ?? не делайте этого, просто верните сообщение.

login(username:string,password:string): Observable<any> {
    console.log('loginService','called');
    return this.http.post<any>(this.configUrl,
        {
            "username": username,
            "password": password,
        });      
}

Answer 2

Возможно изменение Observable на Promise может решить вашу проблему и ошибку, описанную в комментарии:

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

login(username:string, password:string): Promise<any> {
  console.log('loginService','called');
  return new Promise((resolve, reject) => {
    this.http.post<any>(this.configUrl,
      {
        "username": username,
        "password": password,
      })
      .subscribe((res: any) => {
        resolve(res);
      },(error: HttpErrorResponse) => {
        reject(error);
    }
  }    
}


formData(username:string, password:string) {
  if (username == "" || password == "") {
    this.message = "Fields are empty";
  } else {
    this.loginservice.login(username,password)
      .then((heroes: any) => {
        this.serverRes = heroes
      }
      .catch(err: HttpErrorResponse) => {
         //do something with error
      }
  }
}