淺談Angular HttpClient簡(jiǎn)單入門

更新時(shí)間：2018年05月04日 15:23:53 作者：wangduanduan

本篇文章主要介紹了淺談Angular HttpClient 簡(jiǎn)單入門，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

現(xiàn)代瀏覽器支持使用兩種不同的 API 發(fā)起 HTTP 請(qǐng)求：XMLHttpRequest 接口和 fetch() API。

@angular/common/http 中的 HttpClient 類為 Angular 應(yīng)用程序提供了一個(gè)簡(jiǎn)化的 API 來(lái)實(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)文章

Angular實(shí)現(xiàn)下載安裝包的功能代碼分享
本文通過(guò)實(shí)例代碼給大家介紹了angular實(shí)現(xiàn)下載安裝包的功能以及基于angularjs代碼實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)的功能，需要的朋友參考下吧
2017-09-09
angular同一頁(yè)面跳轉(zhuǎn)重新執(zhí)行的實(shí)現(xiàn)方法
這篇文章主要介紹了angular同一頁(yè)面跳轉(zhuǎn)重新執(zhí)行的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11
Angular2搜索和重置按鈕過(guò)場(chǎng)動(dòng)畫
這篇文章主要介紹了Angular2搜索和重置按鈕過(guò)場(chǎng)動(dòng)畫,需要的朋友可以參考下
2017-05-05
AngularJS實(shí)踐之使用NgModelController進(jìn)行數(shù)據(jù)綁定
大家都知道AngularJS中的指令是其尤為復(fù)雜的一個(gè)部分，但是這也是其比較好玩的地方。這篇文章我們就來(lái)說(shuō)一說(shuō)如何在我們自定義的指令中，利用ngModel的controller來(lái)做雙向數(shù)據(jù)綁定，本文對(duì)大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值，有需要的朋友們可以參考借鑒。
2016-10-10
AngularJS基礎(chǔ)學(xué)習(xí)筆記之控制器
在AngularJS中，控制器是一個(gè)Javascript函數(shù)（類型/類），用來(lái)增強(qiáng)除了根作用域意外的作用域?qū)嵗?。?dāng)你或者AngularJS本身通過(guò)<code>scope.$new</code>倆創(chuàng)建一個(gè)新的子作用域?qū)ο髸r(shí)，有一個(gè)選項(xiàng)能讓你將它當(dāng)做參數(shù)傳遞給控制器。
2015-05-05
Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件詳解
這篇文章主要給大家介紹了關(guān)于Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-07-07
Angular17之Angular自定義指令詳解
這篇文章主要介紹了Angular17之 Angular自定義指令的相關(guān)知識(shí) ,需要的朋友可以參考下
2018-01-01
angular-ngSanitize模塊-$sanitize服務(wù)詳解
本篇文章主要介紹了angular-ngSanitize模塊-$sanitize服務(wù)詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
Angular @HostBinding()和@HostListener()用法
本篇文章主要介紹了Angular @HostBinding()和@HostListener()用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
AngularJS過(guò)濾器filter用法實(shí)例分析
這篇文章主要介紹了AngularJS過(guò)濾器filter用法,結(jié)合實(shí)例形式分析了過(guò)濾器filter的定義與使用技巧,需要的朋友可以參考下
2016-11-11