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

Cette fois, je vais vous montrer comment utiliser Angular pour implémenter des requêtes de données, et quelles sont les précautions lors de l'utilisation d'Angular pour implémenter des requêtes de données. Ce qui suit est un cas pratique, 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 demande JSONP

Faites attention à la différence avec la demande d'obtention, 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)
 })
}

Comment faire fonctionner le nœud et utiliser la promesse au lieu de la fonction de rappel

Comment mieux utiliser Vue + -faire défiler pour mettre en œuvre le mouvement Fin de la navigation dans l'index alphabétique

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!