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)
 })
}

Unterschiede

Das angegebene Callback-FunktionName&callback=JSONP_CALLBACK

POST-Anfrage

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

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

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

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!