等待Angular 2中http请求的服务器答案

发布时间：2020-12-17 17:46:21 所属栏目：安全来源：网络整理

导读：我的Angular2应用程序有点问题.我希望从服务器获取一些数据以供我的用户登录,但我的代码正在进行中,我有很多错误.我想等待服务器的回答,然后对我的数据做一些事情. 这是我的代码： import { Injectable } from '@angular/core';import { Http,Response,Heade

我的Angular2应用程序有点问题.我希望从服务器获取一些数据以供我的用户登录,但我的代码正在进行中,我有很多错误.我想等待服务器的回答,然后对我的数据做一些事情.

这是我的代码：

import { Injectable } from '@angular/core';
import { Http,Response,Headers } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { User } from './user';

@Injectable()

export class UserService {

    public usersTmp: Array<Object> = new Array<Object>();
    public users: Array<User>;
    public user: User = new User();
    public noteToSend;
    constructor(private http: Http) { }

    getUsers() {
        var headers = new Headers();
        headers.append('Accept','q=0.8;application/json;q=0.9');

        this.http.get('/AngularApp/api/users',{ headers: headers })
            .map((res: Response) => res.json())
            .subscribe(
            data => {
                console.log(data);
                this.usersTmp = data;
            },err => console.error(err),() => console.log('done')
            );

        this.users = new Array<User>();
        for (var i = 0; i < this.usersTmp.length; i++) {
            this.user = new User();
            this.user.id = this.usersTmp[i]["userId"];
            this.user.name = this.usersTmp[i]["userName"];
            this.user.email = this.usersTmp[i]["userEmail"];
            this.user.pass = this.usersTmp[i]["userPassword"];

            this.users.push(this.user);

        }
        return this.users;
    }

正如我注意到我的代码将转到for循环,直到我从服务器得到答案,所以我只返回空数组.任何人都可以帮助我吗？

解决方法

在服务中,您应该返回组件可以订阅的Observable.由于get请求的异步模式,它无法以您的方式工作.

作为提案,您的服务可能与此类似

getUsers() {
    let headers = new Headers();
    headers.append('Accept','q=0.8;application/json;q=0.9');

    return this.http.get('/AngularApp/api/users',{ headers: headers })
        .map((res: Response) => res.json());
}

组件的相关部分如下：

constructor(private userService:UserService) {
    this.userService.getUsers().subscribe(
      data => this.iterateOverUsers(data));
 }

 iterateOverUsers(data) {
   // here comes your for loop
 }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!