Как отправить ajax-запрос в угловой 6?

Question

Я совершенно незнаком с angular, так как я back-end разработчик. Чтобы проверить мой api, мне нужно отправить запрос ajax с angular. Подскажите как это сделать? Есть код. Запрос должен быть выполнен до очистки localeStorage.

<button (click)="logoutAndClose()" class="btn_green btn_ml" mat-raised-button>
  Log out
</button>

@Component({
  selector: 'app-logout-modal',
  templateUrl: './logout-modal.component.html',
  styleUrls: ['./logout-modal.component.scss']
})
export class LogoutModalComponent implements OnInit {

  constructor(public thisDialogRef: MatDialogRef<LogoutModalComponent>,
              private router: Router,
              private http: HttpClient,
              @Inject(MAT_DIALOG_DATA) public data: any) {
  }

  ngOnInit() {
  }
  logoutAndClose(): void {
    this.http.post("http://127.0.0.1:8001/api/v1/users/settings/logout/")
    localStorage.clear();
    this.thisDialogRef.close();
    this.router.navigateByUrl(RouteUrls.Login);
  }
}

Answer 1

Рекомендуется создать службу для отправки HTTP-запросов:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class YourService {
  private url: string = "http://api";
  private endpoint:string = "car";

  constructor(private http: HttpClient,
             ) { }


  get(id: number): Observable<Car> {
      return this.httpClient
          .get<Car>(`${this.url}/${this.endpoint}/${id}`)
          .pipe(map(data => data));
  }
}

, и тогда вы сможете использовать встроенный ввод зависимостей в своем компоненте:

export class YourCarComponent {
    constructor(private yourService: YourService) {
    }

    getCars(id: number) {
       this.yourService.get(id)
           .subscribe(s=> console.log(s));
}

ОБНОВЛЕНИЕ:

Чтобы выполнить http-запрос, вам нужно его запустить. Таким образом, вам нужно вызвать subscribe метод:

this.http.post("http://127.0.0.1:8001/api/v1/users/settings/logout/")
         .subscribe(s => console.log(s));

Кроме того, в качестве передового опыта не следует содержать подробности реализации http-запросов, потому что это не имеет отношения к мнению. Вид должен просто показывать данные.

Answer 2

1. Вам необходимо импортировать HTTPModule

   @ NgModule ({import: [BrowserModule, // импортировать HttpClientModule после BrowserModule. HttpClientModule,],

2. Внедрить в конструктор:

   @ Injectable () экспортный класс YourService {constructor (private http: HttpClient) {}}

3. this.http.get (this.url) .subscribe ((data: CanBeDirectlyMapToJsonObject) => {});

Подробнее см. https://angular.io/guide/http