首頁(yè) 猿問(wèn) 如何在angular...

如何在angular 6中發(fā)送ajax請(qǐng)求？

JavaScript

ITMISS 2021-11-12 17:23:07

我完全不熟悉，angular因?yàn)槲沂莃ack-end開發(fā)人員。為了測(cè)試我的api，我需要從angular. 告訴我怎么做？有一個(gè)代碼。請(qǐng)求必須在清除之前執(zhí)行l(wèi)ocaleStorage。<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); }}

查看完整描述

2 回答

慕斯王

TA貢獻(xiàn)1864條經(jīng)驗(yàn) 獲得超2個(gè)贊

作為最佳實(shí)踐，您應(yīng)該創(chuàng)建一個(gè)服務(wù)來(lái)發(fā)送 HTTP 請(qǐng)求：

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));

}

然后你就可以在你的組件中使用內(nèi)置的依賴注入：

export class YourCarComponent {

constructor(private yourService: YourService) {

}

getCars(id: number) {

this.yourService.get(id)

.subscribe(s=> console.log(s));

}

更新：

為了執(zhí)行您的 http 查詢，您需要運(yùn)行它。所以你需要調(diào)用subscribe方法：

this.http.post("http://127.0.0.1:8001/api/v1/users/settings/logout/")

.subscribe(s => console.log(s));

此外，作為最佳實(shí)踐，不應(yīng)包含 http 請(qǐng)求的實(shí)現(xiàn)細(xì)節(jié)，因?yàn)樗皇翘幚硪晥D。視圖應(yīng)該只顯示數(shù)據(jù)。

反對(duì) 回復(fù) 2021-11-12

慕碼人2483693

TA貢獻(xiàn)1860條經(jīng)驗(yàn) 獲得超9個(gè)贊

您需要導(dǎo)入 HTTPModule
@NgModule({ 導(dǎo)入: [ BrowserModule, // 在 BrowserModule 之后導(dǎo)入 HttpClientModule.HttpClientModule, ],
在構(gòu)造函數(shù)中注入：
@Injectable() 導(dǎo)出類 YourService { 構(gòu)造函數(shù)(私有 http: HttpClient) { } }
this.http.get(this.url).subscribe((data: CanBeDirectlyMapToJsonObject) => { });

有關(guān)更多詳細(xì)信息，請(qǐng)參閱https://angular.io/guide/http

反對(duì) 回復(fù) 2021-11-12