So bedienen Sie Angular, um eine Datenanforderung zu implementieren

Dieses Mal zeige ich Ihnen, wie Sie Angular zum Implementieren von Datenanforderungen verwenden und welche Vorsichtsmaßnahmen beim Betrieb von Angular zum Implementieren von Datenanforderungen gelten. Hier sind praktische Fälle, werfen wir einen Blick darauf.

Wenn Sie Angular zum Anfordern von Daten verwenden, müssen Sie das HttpModule-Modul einführen. Wenn Sie den JSONP-Modus verwenden, müssen Sie das JsonpModule-Modul

import { HttpModule, JsonpModule } from '@angular/http'

einführen im aktuellen Modul Registrieren Sie

imports: [
 HttpModule,
 JsonpModule
],

in den Importen. Nach der Registrierung können Sie die entsprechende Methode in der Komponentendatei einführen, um Datenanfragen

import { Http, Jsonp } from '@angular/http'

und dann im -Konstruktor der aktuellen Komponente durchzuführen Nach der Injektion können Sie es

constructor(private http: Http, private jsonp: Jsonp) { }

wie folgt verwenden: eine einfache Get-Anfrage

// 进行注入，拿到相对应的方法
constructor(private http: Http, private jsonp: Jsonp) { }
public list: any = []
// 请求数据
getData() {
 let url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'
 let _this = this
 this.http.get(url).subscribe((data) => {
  _this.list = JSON.parse(data['_body'])['result']
  console.log(_this.list)
 })
}

und sie im Frontend rendern

<button (click)="getData()">get 请求数据</button>
<ul>
 <li *ngFor="let item of list">
  {{item.title}}
 </li>
</ul>

JSONP-Anfragedaten

Beachten Sie den Unterschied zur Get-Anfrage. Verwenden Sie Folgendes:

// 请求数据
jsonpData() {
 let url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSONP_CALLBACK'
 let _this = this
 this.jsonp.get(url).subscribe((data) => {
  _this.list = data['_body']['result']
  console.log(_this.list)
 })
}

rrree

Unterschiede

Das angegebene Callback-FunktionName&callback=JSONP_CALLBACK

Die Anforderungsmethode ändert sich in this.jsonp.get(url)

Das nach der Anforderung erhaltene Datenformat ist nicht einheitlich und muss selbst angepasst werden

POST-Anfrage

Die Anforderungsmethode unterscheidet sich geringfügig von der von GET. Zuerst müssen Sie sie vorstellen den Anfrage-Header {Header}

// 渲染
<button (click)="jsonpData()">jsonp 请求数据</button>
<ul>
 <li *ngFor="let item of list">
  {{item.title}}
 </li>
</ul>

und dann: Um die Anfrage-Header zu definieren, müssen Sie zuerst die Header instanziieren

import { Http, Jsonp, Headers } from '@angular/http'

Zum Schluss bringen Sie die Header bei der Übermittlung der Daten mit

private headers = new Headers({'Content-Type': 'application/json'})

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Es ist noch spannender. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man den Knoten bedient und die Promise- statt der Callback-Funktion verwendet

Wie man Vue + besser nutzt -Scrollen Sie, um die Bewegung zu implementieren. Alphabetische Indexnavigation beenden

Das obige ist der detaillierte Inhalt vonSo bedienen Sie Angular, um eine Datenanforderung zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!