データベースへの追加が失敗する時があるのを解決したいです

Question

laravelとangularでtask管理のアプリケーションを作成しています

angular側からデータベースへデータをPOSTメソッドで追加しようとしたときにうまく追加されない時がたまにあります。
これを解決して毎回ちゃんとデータベースに追加できるようにしたいので追加できない原因究明を助けていただきたいです。

該当のソースコード

<div>
      <label
        >new Task:
        <input #taskName />
      </label>
 
      <button (click)="add(taskName.value); taskName.value = ''">
        Cleate Task
      </button>
    </div>

<div>
      <label
        >new Task:
        <input #taskName />
      </label>
      <!-- (click) 入力値をadd()に渡したあと、入力をクリアする -->
      <button (click)="add(taskName.value); taskName.value = ''">
        Cleate Task
      </button>
    </div>

add(task_title: string): void {
    this.editTask = undefined;
    task_title = task_title.trim();

    const newTask: Task = { task_title } as Task;
    this.taskservice.addTask(newTask).subscribe((task) => this.Data.push(task));
    location.reload();
  }

addTask(task: Task): Observable<Task> {
    return this.http.post<Task>(this.taskURL, task);
  }

試したこと

laravel側とangular両方のlogの確認

補足情報（FW/ツールのバージョンなど）

サーバーサイド:laravel
フロントサイド:angular
データベース:clearBD MySQL
仕様ブラウザ: GoogleChrome
上記の要件でheroku上で運用しています

Answer 1

this.taskservice.addTask(newTask).subscribe((task) => this.Data.push(task));

return this.http.post<Task>(this.taskURL, task);

これらは非同期通信じゃないでしょうか？
非同期で通信中にリロードが行われる事で、postが中断されている可能性があります