淺談Angular HttpClient簡單入門

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

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

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

@angular/common/http 中的 HttpClient 類為 Angular 應(yīng)用程序提供了一個簡化的 API 來實現(xiàn) HTTP 客戶端功能。

一、準備工作

首先在app.module.ts 導入 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) { }
}

三、請求數(shù)據(jù)

return this.http.get/post(url:'請求地址' ,
  options: {
   headers: this.headers
  })
   .toPromise()
   .then((data: any) => {
    return data;
   })
   .catch((err) => {
    console.log(err);
   });
 }

四、在對應(yīng)的component.ts文件中引入service

數(shù)據(jù)格式：

{
  "lists":[
    {"title":"","pic":""},
    {"title":"","pic":""}
  ]
}

五、頁面上調(diào)用

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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