首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >RxJS 处理多个Http请求

RxJS 处理多个Http请求

作者头像
阿宝哥
发布2019-11-05 16:17:37
5.4K0
发布2019-11-05 16:17:37
举报
文章被收录于专栏:全栈修仙之路全栈修仙之路

有时候进入某个页面时,我们需要从多个 API 获取数据然后进行页面显示。管理多个异步数据请求会比较困难,但我们可以借助 Angular Http 服务和 RxJS 库提供的功能来实现上述的功能。处理多个请求有多种方式,使用串行或并行的方式。

基础知识

mergeMap

mergeMap 操作符用于从内部的 Observable 对象中获取值,然后返回给父级流对象。

  • 合并 Observable 对象
import { of } from "rxjs";
import { mergeMap } from "rxjs/operators";

const source$ = of("Hello");
const example$ = source$.pipe(mergeMap(val => of(`${val} World!`)));
const subscribe = example$.subscribe(val => console.log(val));

在上面示例中包含两种 Observable 类型:

  • 源 Observable 对象 —— 即 source$ 对象。
  • 内部 Observable 对象 —— 即 of(${val} World!) 对象。

仅当内部的 Observable 对象发出值后,才会合并源 Observable 对象输出的值,并最终输出合并的值。

forkJoin

forkJoin 是 RxJS 版本的 Promise.all(),即表示等到所有的 Observable 对象都完成后,才一次性返回值。

  • 合并多个 Observable 对象
import { timer, forkJoin } from "rxjs";
import { mapTo } from "rxjs/operators";

const getPostOne$ = timer(1000).pipe(mapTo({ id: 1 }));
const getPostTwo$ = timer(2000).pipe(mapTo({ id: 2 }));

forkJoin(getPostOne$, getPostTwo$).subscribe(
  res => console.log(res)
);

处理 Http 请求

我们先来看一下 Angular Http 服务简单示例:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'my-app',
  template: `
    <p>HttpModule Demo</p>
  `
})
export class AppComponent implements OnInit {
  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get('https://jsonplaceholder.typicode.com/users')
      .subscribe(users => console.log(users));
  }
}

上面示例中,我们通过依赖注入方式注入 HttpClient 服务,然后在 ngOnInit() 方法中调用 http 对象的 get() 方法来获取数据。这个例子很简单,它只处理一个请求,接下来我们来看一下如何处理两个请求。

Map 和 Subscribe

有些时候,当我们发送下一个请求时,需要依赖于上一个请求的数据。即我们在需要在上一个请求的回调函数中获取相应数据,然后在发起另一个 HTTP 请求。

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'my-app',
  template: `
    <p>{{username}} Detail Info</p>
    {{user | json}}
  `
})
export class AppComponent implements OnInit {
  constructor(private http: HttpClient) { }

  apiUrl = 'https://jsonplaceholder.typicode.com/users';
  username: string = '';
  user: any;

  ngOnInit() {
    this.http.get(this.apiUrl)
      .subscribe(users => {
        let username = users[6].username;
        this.http.get(`${this.apiUrl}?username=${username}`)
          .subscribe(
          user => {
            this.username = username;
            this.user = user;
          });
      });
  }
}

在上面示例中,我们先从 https://jsonplaceholder.typicode.com/users 地址获取所有用户的信息,然后再根据指定用户的 username 进一步获取用户的详细信息。虽然功能实现了,但有没有更好的解决方案呢?答案是有的,可以通过 RxJS 库中提供的 mergeMap 操作符来简化上述的流程。

mergeMap

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { mergeMap } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  template: `
    <p>{{username}} Detail Info</p>
    {{user | json}}
  `
})
export class AppComponent implements OnInit {
  constructor(private http: HttpClient) { }

  apiUrl = 'https://jsonplaceholder.typicode.com/users';
  username: string = '';
  user: any;

  ngOnInit() {
    this.http.get(this.apiUrl)
      .pipe(mergeMap(users => {
        let username = users[6].username;
        return this.http.get(`${this.apiUrl}?username=${username}`)
      })).subscribe(user => {
        this.user = user
      });
  }
}

在上面示例中,我们通过 mergeMap 操作符,解决了嵌套订阅的问题。最后我们来看一下如何处理多个并行的 Http 请求。

forkJoin

接下来的示例,我们将使用 forkJoin 操作符。如果你熟悉 Promises 的话,该操作符与 Promise.all() 实现的功能类似。forkJoin 操作符接收一个 Observable 对象列表,然后并行地执行它们。一旦列表的 Observable 对象都发出值后,forkJoin 操作符返回的 Observable 对象会发出新的值,即包含所有 Observable 对象输出值的数组。具体示例如下:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { forkJoin } from "rxjs";

@Component({
  selector: 'my-app',
  template: `
    <p>Post Detail Info</p>
    <ul>
      <li>{{post1 | json}}</li>
      <li>{{post2 | json}}</li>
    </ul>
  `
})
export class AppComponent implements OnInit {
  constructor(private http: HttpClient) { }

  apiUrl = 'https://jsonplaceholder.typicode.com/posts';
  post1: any;
  post2: any;

  ngOnInit() {
    let post1$ = this.http.get(`${this.apiUrl}/1`);
    let post2$ = this.http.get(`${this.apiUrl}/2`);

    forkJoin([post1$, post2$])
      .subscribe(results => {
        this.post1 = results[0];
        this.post2 = results[1];
      });
  }
}

感兴趣的同学可以查看 Stackblitz 完整示例。

参考资源

  • angular-multiple-http-requests-with-rxjs
  •  Six Operators That you Must Know
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018/09/09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 基础知识
    • mergeMap
      • forkJoin
      • 处理 Http 请求
      • Map 和 Subscribe
      • mergeMap
      • forkJoin
      • 参考资源
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档