So verwenden Sie Angular zum Implementieren der Datenanforderungsfunktion

Dieses Mal zeige ich Ihnen, wie Sie Angular zum Implementieren der Datenanforderungsfunktion verwenden. Was sind die Vorsichtsmaßnahmen für Angular, um die Datenanforderungsfunktion zu implementieren?

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:

Analyse des Codes zur Berechnung des Einkaufsbetrags mit AngularJS

Wenn die URL in React-Router lautet nicht aktualisiert Parameter ändern

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Angular zum Implementieren der Datenanforderungsfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!