ng g s services/http

?app.module.ts

...
@NgModule({declarations: [...],imports: [...HttpClientModule,//這個很重緊要，沒有就會報錯],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

services/http.service.ts?

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';@Injectable({providedIn: 'root'
})
export class HttpService {private apiUrl = "http://localhost:8888/test/1.json";constructor(private http: HttpClient) { }public getData(params: any) {return this.http.get(this.apiUrl, { params });}public postData(params: any) {return this.http.post(this.apiUrl, { params });}}

?app.component.ts

import { HttpService } from './services/http.service';...constructor(public http: HttpService) { }...ngOnInit() {this.http.getData({ param1: 1, param2: 2 }).subscribe(d => {console.log(d);});this.http.postData({ param1: 1, param2: 2 }).subscribe(d => {console.log(d);});}

---

最終呈現(xiàn)的效果是

?

總結(jié)

以上是生活随笔為你收集整理的【请求后台接口】30秒完成Angular10精简版HttpClient请求服务搭建的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。