Comment utiliser Angular pour implémenter la fonction de demande de données

Cette fois, je vais vous montrer comment utiliser Angular pour implémenter la fonction de demande de données. Quelles sont les précautions pour qu'Angular implémente la fonction de demande de données. Voici des cas pratiques, jetons un coup d'œil.

Lorsque vous utilisez Angular pour demander des données, vous devez introduire le module HttpModule Si vous utilisez le mode jsonp, vous devez introduire le module JsonpModule

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

. puis dans le registre actuel dans les importations dans le module

imports: [
 HttpModule,
 JsonpModule
],

Après l'inscription, vous pouvez introduire la méthode correspondante dans le fichier du composant pour faire des requêtes de données

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

Puis dans le le Constructeur du composant actuel peut être utilisé après l'injection

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

est utilisé comme suit, une simple requête d'obtention

// 进行注入，拿到相对应的方法
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)
 })
}

peut être rendue dans le frontend

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

Données de requête JSONP

Faites attention à la différence avec la requête get, utilisez ce qui suit

// 请求数据
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)
 })
}

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

Différences

La fonction de rappel spécifiéename&callback=JSONP_CALLBACK

La méthode de requête devient this.jsonp.get(url)

Le format de données obtenu après la demande n'est pas uniforme et doit être ajustée par vous-même

Requête POST

est légèrement différente de la méthode de requête GET Tout d'abord, vous. vous devez introduire l'en-tête de la requête { Headers }

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

puis définir l'en-tête de la requête

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

et enfin apporter les en-têtes lors de la soumission des données <.>

postData() {
 let url = 'http://localhost:8080/login'
 let data = {
  "username": "zhangsan",
  "password": "123"
 }
 this.http.post(
  url,
  data,
  {headers: this.headers}
 ).subscribe((data) => {
  console.log(data)
 })
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Analyse du code de calcul du montant des achats à l'aide d'angularjs

Lorsque l'URL dans React-Router est non rafraîchi Modifier les paramètres

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!