Angle2의 Http 요청 원칙 정보(자세한 튜토리얼)

이 글은 주로 Angular2의 Http 요청의 원리와 사용법을 소개하고, AngularJS의 http 관련 모듈을 분석하여 http 서비스 요청과 그에 상응하는 관련 운영 기법을 예시 형태로 구현한 것입니다

이 글은 다음과 같습니다. 기사에서는 angle2 Http 요청 원리 및 사용법의 예를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

HTTP 서비스 제공

HttpModule은 Angular의 핵심 모듈이 아닙니다. 이는 웹 액세스를 위해 Angular에서 사용하는 선택적 방법이며 @angular/http라는 별도의 위성 모듈에 있습니다. @angular/http的独立附属模块中.

编辑app.module.ts

import { HttpModule, JsonpModule } from '@angular/http';
@NgModule({
 imports: [
  HttpModule,
  JsonpModule
 ],
})

angular-in-memory-web-api

npm install angular-in-memory-web-api --save-dev

This in-memory web api service processes an HTTP request and returns an Observable of HTTP Response object in the manner of a RESTy web api.

:base/:collectionName/:id?
GET api/heroes     // all heroes
GET api/heroes/42    // the character with id=42
GET api/heroes?name=^j // 'j' is a regex; returns heroes whose name starting with 'j' or 'J'
GET api/heroes.json/42 // ignores the ".json"

之前测试时用的app/mock/user_data_memory_mock.ts数据

import {User} from '../model/User';
import { InMemoryDbService } from 'angular-in-memory-web-api';
export class UserDataMemoryMock implements InMemoryDbService{
 createDb() {
  const users: User[] = [
    new User('chenjianhua_a', 21, '2290910211@qq.com', '123456'),
    new User('chenjianhua_b', 22, '2290910211@qq.com', '123456'),
    new User('chenjianhua_c', 23, '2290910211@qq.com', '123456'),
    new User('chenjianhua_d', 24, '2290910211@qq.com', '123456'),
    new User('chenjianhua_e', 25, '2290910211@qq.com', '123456'),
    new User('chenjianhua_f', 26, '2290910211@qq.com', '123456'),  
  ];
  return {users};
 }
}

编辑app.module.ts

import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { UserDataMemoryMock } from './mock/user_data_memory_mock';
@NgModule({
 imports: [
  InMemoryWebApiModule.forRoot(UserDataMemoryMock),
 ]
})

导入InMemoryWebApiModule并将其加入到模块的imports数组。 InMemoryWebApiModule将Http客户端模拟的后端服务
forRoot()

Edit app.module.ts

import {Injectable} from '@angular/core';
import { Headers, Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import { User } from '../model/User';
import { Logger } from './logger.service';
@Injectable()
export class UserService {
  private USERURL = 'api/users';
  private headers = new Headers({'Content-Type': 'application/json'});
  constructor(private Log: Logger,
  private http: Http) { }
  getUserByName(name: string): Promise<User> {
  const url = `${this.USERURL}/?name=${name}`;
  return this.http.get(url)
    .toPromise()
    .then(response => response.json().data as User)
    .catch(this.handleError);
  }
  getUsers(): Promise<User[]> {
    console.log(&#39;Get User!&#39;);
    return this.http.get(this.USERURL)
    .toPromise()
    .then(response => response.json().data as User[])
    .catch(this.handleError);
  }
  create(name: string): Promise<User> {
  return this.http
    .post(this.USERURL, JSON.stringify({name: name}), {headers: this.headers})
    .toPromise()
    .then(res => res.json().data as User)
    .catch(this.handleError);
  }
  private handleError(error: any): Promise<any>{
    console.log(&#39;An error occurred :&#39;, error);
    return Promise.reject(error.message);
  }
}

angle-in-memory -web-api

import { Component, OnInit } from '@angular/core';
import { Logger } from '../../service/logger.service';
import { UserService } from '../../service/user.restful.service';
import { User } from '../../model/User';
import { Subject } from 'rxjs/Subject';
@Component({
 selector: 'app-loginform',
 templateUrl: './app.loginform.html',
 styleUrls: ['./app.loginform.css'],
 providers: [
  Logger,
  UserService
 ]
})
export class AppLoginFormComponent implements OnInit {
  users: User[];
  submitted = false;
  model = new User('1', 'fangfang', 22, '2290910211@qq.com', '123456');
  constructor(
    private Log: Logger,
    private userService: UserService
  ){}
  ngOnInit(): void{
    this.userService
    .getUsers()
    .then( users => this.users = users);
  }
  onSubmit(): void {
    this.userService.getUserByName(this.model.name)
    .then( user => {
      console.log('user.name', user[0].name);
      console.log('user.password', user[0].password);
      if(user[0].name === this.model.name
      && user[0].password === this.model.password){
        this.Log.log('login success!');
        this.submitted = true;
      }else{
        this.Log.log('login failed!');
        this.submitted = false;
      }
    })
    .catch(errorMsg => console.log(errorMsg));
  }
}

이 인메모리 웹 API 서비스는 HTTP 요청을 처리하고 RESTy 웹 API 방식으로 HTTP 응답 객체의 Observable을 반환합니다.

rrreee이전 테스트 app/mock/user_data_memory_mock에 사용되었습니다. ts datarrreeeapp.module.ts

rrreee

InMemoryWebApiModule을 가져오고 모듈의 imports 배열에 추가하세요. InMemoryWebApiModule은 Http 클라이언트의 백엔드 서비스를 시뮬레이션합니다.
forRoot()구성 메서드에는 메모리 데이터베이스에 데이터를 채우기 위해 UserMemoryMockService 클래스 인스턴스가 필요합니다.

app/service/user.restful 편집 .service.ts

rrreee

Edit app/comComponents/app-loginform/app.loginform.tsrrreee

HTTP Promise

Angular의 http.get은 RxJS Observable 객체를 반환합니다. Observable은 비동기 데이터 스트림을 관리하는 강력한 방법입니다.

이제 toPromise 메소드를 사용해 Observable을 Promise 객체로 직접 변환해 보겠습니다.

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

JavaScript 재귀 순회 및 비재귀 순회

🎜🎜🎜VUE 개인 요약(발생한 문제)🎜🎜🎜🎜Nuxt.js Vue 서버 측 렌더링 탐색🎜🎜🎜🎜let 및 var in js 변수의 차이점은 무엇입니까? 🎜🎜🎜🎜Vue에서는 시계가 개체 속성의 변화를 감지하지 못하는 문제가 있습니다🎜🎜

위 내용은 Angle2의 Http 요청 원칙 정보(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!