如何获取存储在服务中的异步数据？

Question

我正在从 http 获取数据，将其存储在数组中的同一服务中。

export class UserService {
    myusers: User[];
    constructor(private http: HttpClient) {}
    getUsers () {
     return this.http.get<User[]>('https://randomuser.me/api/results=5')
    .subscribe( data => { this.myusers = data['results']}); }
}

当我在 component.ts 中安慰我的用户时，它会打印 'Undefined'.

export class UserComponent implements OnInit {
  constructor(private service: UserService) { }
  ngOnInit() {
    this.service.getUsers();
    console.log(this.service.myusers); //undefined
  }
}

那么我怎样才能访问 this.service.myusers？不要建议将数据存储在组件数组中而不是服务 myusers 数组中的解决方案。

Answer 1

由于从 API 返回数据需要一点时间，因此您需要从您的服务中获得有关作业完成的回调。

export class UserService {
    myusers: User[];
    constructor(private http: HttpClient) {}
    getUsers () {
        return this.http.get<User[]>('https://randomuser.me/api/results=5');
    }
    setUsers (users: User[]) {
        this.myusers = users;
    }
}

调用如下函数：

export class UserComponent implements OnInit {
  constructor(private service: UserService) { }
  ngOnInit() {
    this.service.getUsers()
    .subscribe( data => { this.service.setUsers(data); console.log(data); });
  }
}

如果这不符合您的目的，请告诉我

Answer 2

你的服务应该是这样的。

    import {Injectable} from '@angular/core';
    import {Http, Response} from '@angular/http';
    import {Observable} from 'rxjs/Observable';

    @Injectable()

    export class UserService {
        constructor(private http: Http) {}

        getUsers (): Observable<void> {
            const url = 'https://randomuser.me/api/results=5';
            return this.http.get(url).map(
                (res: Response) => {
                  return res.json() as = User[];
                }).catch(
                (error: Response) => {
                    return Observable.throw(error.json());
                });
        }
    }

组件应该像

export class UserComponent implements OnInit {
  users: User[] = [];

  constructor(private userService: UserService) { }

  ngOnInit() {
    this.getUsers();
  }

  private getUsers(): void {
       this.userService.getUsers().subscribe(
         (response: User[]) => {
           this.users = response;
           console.log(response); 
        );
    }       
}

注意：angular4 基于类型脚本。因此，根据最佳实践，您需要将类型分配给方法和变量。

Answer 3

你总是可以 return 使用 Observable.of

数组中的 Observable

valores=[{id:1,nombre:"uno"},{id:2,nombre:"dos"},{id:3,nombre:"tres"}];

getUsers()
{ 
    if (this.valores)
       return Observable.of(this.valores);
    else 
        return this.http.get(url).map((response)=>
        this.valores=...
        ...);
}

如何获取存储在服务中的异步数据？

How to get async data which is stored in the service?

angular

typescript

angular4-httpclient