溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Angular中HttpClient的示例分析

發(fā)布時間:2021-09-03 11:02:38 來源:億速云 閱讀:120 作者:小新 欄目:web開發(fā)

小編給大家分享一下Angular中HttpClient的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

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

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

一、準備工作

首先在app.module.ts 導入 HttpClientModule。如下:

import { HttpClientModule } from '@angular/common/http';
@NgModule({
 imports: [
  HttpClientModule,
 ]
})
export class AppModule {}

Angular中HttpClient的示例分析

二、在需要引用HttpClient的service.ts中引入HttpClient,如下:

import { HttpClient } from '@angular/common/http';
export class ConfigService {
 constructor(private http: HttpClient) { }
}

Angular中HttpClient的示例分析

三、請求數據

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

Angular中HttpClient的示例分析

四、在對應的component.ts文件中引入service

Angular中HttpClient的示例分析

數據格式:

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

五、頁面上調用

Angular中HttpClient的示例分析

以上是“Angular中HttpClient的示例分析”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業(yè)資訊頻道!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI