Angular를 사용하여 데이터 요청 기능을 구현하는 방법

이번에는 Angular를 사용하여 데이터 요청 기능을 구현하는 방법을 보여 드리겠습니다. Angular에서 데이터 요청 기능을 구현하는 데 필요한 Notes는 무엇입니까? 다음은 실제 사례입니다.

Angular를 사용하여 데이터를 요청할 때 HttpModule 모듈을 도입해야 합니다. jsonp 모드를 사용하는 경우 JsonpModule 모듈을 도입해야 합니다

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

그런 다음 현재 모듈의 imports에 등록합니다

imports: [
 HttpModule,
 JsonpModule
],

등록 후 해당 메소드를 컴포넌트 파일에 도입하여 데이터 요청을 할 수 있습니다

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

그런 다음 이를 현재 컴포넌트의 생성자 에 삽입하여 사용할 수 있습니다

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

다음을 사용하여 간단한 요청 가져오기

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

프런트 데스크에서 수행 그냥 렌더링

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

JSONP 요청 데이터

get 요청과의 차이점에 주의하세요. 다음을 사용하세요

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

Differences

지정된 콜백 함수name&callback=JSONP_CALLBACK을 추가해야 합니다. 요청한 url 매개변수 끝에

요청 방법이 this.jsonp.get(url)로 변경됩니다

요청 후 얻은 데이터 형식이 일정하지 않아 직접 조정해야 합니다

POST 요청

는 GET 요청 방식과 약간 다릅니다. 먼저 요청 헤더 {Headers}

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

를 도입해야 합니다. 그런 다음 요청 헤더를 정의하려면 먼저 헤더를 인스턴스화해야 합니다.

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

마지막으로 헤더를 가져와야 합니다. 데이터 제출

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

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

angularjs에서 쇼핑 금액 계산 코드 분석 구현

새로 고침 없이 React-Router에서 Url의 매개변수 변경

위 내용은 Angular를 사용하여 데이터 요청 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!