淺談Angular HttpClient簡(jiǎn)單入門
更新時(shí)間：2018年05月04日 15:23:53 作者：wangduanduan
本篇文章主要介紹了淺談Angular HttpClient 簡(jiǎn)單入門，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
現(xiàn)代瀏覽器支持使用兩種不同的 API 發(fā)起 HTTP 請(qǐng)求：XMLHttpRequest 接口和 fetch() API。
@angular/common/http 中的 HttpClient 類為 Angular 應(yīng)用程序提供了一個(gè)簡(jiǎn)化的 API 來實(shí)現(xiàn) HTTP 客戶端功能。
一、準(zhǔn)備工作
首先在app.module.ts 導(dǎo)入 HttpClientModule。如下：
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
HttpClientModule,
]
})
export class AppModule {}
二、在需要引用HttpClient的service.ts中引入HttpClient，如下：
import { HttpClient } from '@angular/common/http';
export class ConfigService {
constructor(private http: HttpClient) { }
}
三、請(qǐng)求數(shù)據(jù)
return this.http.get/post(url:'請(qǐng)求地址' ,
options: {
headers: this.headers
})
.toPromise()
.then((data: any) => {
return data;
})
.catch((err) => {
console.log(err);
});
}
四、在對(duì)應(yīng)的component.ts文件中引入service
數(shù)據(jù)格式：
{
"lists":[
{"title":"","pic":""},
{"title":"","pic":""}
]
}
五、頁(yè)面上調(diào)用
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了AngularJs分頁(yè)插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-06-06
本篇文章主要介紹了詳解使用angular的HttpClient搭配rxjs ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
Angular2中constructor和ngOninit的使用講解
這篇文章主要介紹了Angular2中constructor和ngOninit的使用講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了Angular中$cacheFactory緩存的使用,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
相信大家都知道AngularJS是一個(gè)前端框架，實(shí)現(xiàn)了可交互式的頁(yè)面，但是對(duì)于一個(gè)web應(yīng)用，頁(yè)面上進(jìn)行展示的數(shù)據(jù)從哪里來，肯定需要服務(wù)端進(jìn)行支持，那么AngularJS是如何同服務(wù)端進(jìn)行交互的呢？通過這篇文章大家一起來看看吧。2016-09-09
這篇文章主要介紹了使用angular寫一個(gè)hello world的方法及示例,需要的朋友可以參考下2015-01-01
本篇文章主要介紹了Angular整合zTree的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
測(cè)試IE瀏覽器對(duì)JavaScript的AngularJS的兼容性
這篇文章主要介紹了測(cè)試IE瀏覽器對(duì)JavaScript的AngularJS的兼容性的方法,盡管隨著Windows10的近期上市,IE瀏覽器即將成為歷史...需要的朋友可以參考下2015-06-06
這篇文章主要給大家介紹了關(guān)于Angular2使用jQuery的方法教程，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來跟著小編一起學(xué)習(xí)學(xué)習(xí)吧。2017-05-05
這篇文章主要介紹了Angular PWA使用的Demo示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01