Angular7 HttpClient处理多个请求

Posted 金木龙

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Angular7 HttpClient处理多个请求相关的知识,希望对你有一定的参考价值。

1. MergeMap - 串联请求

  • 后一个请求需要前一个请求的返回结果时,需要使用串联请求。

  • 可以使用MergeMap实现, 优势是减少嵌套,优化代码;

代码如下:

import {HttpClient} from ‘@angular/common/http‘;
import {mergeMap} from ‘rxjs‘;

@Component({
   ...
})
export class HttpComponent implements OnInit {


  constructor(private http: HttpClient) { }


  ngOnInit() {
    // 串联请求, 前面请求会影响后面的请求,前面请求未请求到,后面请求中断;
    const httpThis = this;
    httpThis.http.get(‘/api/token‘).
      pipe(
      map(token => {
        return token;
      }),
      mergeMap((tokenRes: any) => { // tokenRes接收的是token数据
        return httpThis.http.get(`/api/user?token=${tokenRes}`)
          .pipe((user) => {
            return user;
          });
      }),
      mergeMap((userRes: any) => { // userRes接收的是user数据
        return httpThis.http.get(`api/data?user=${userRes}`)
          .pipe((data) => {
            return data;
          });
      }))
      .subscribe((resp) => { // resp接收的是data数据
        console.log(‘最终结果resp是最后一个mergeMap的data‘);
      });
  }
}

2. ForkJoin - 并联请求

  • 多个请求,无所谓先后顺序,等到全部请求完成后执行一定的操作时,需要使用并联请求;

  • 可以使用ForkJoin,和promise方法效果一样,好处是:可以减少嵌套,优化代码;

代码如下:

import {HttpClient} from ‘@angular/common/http‘;
import {forkJoin} from ‘rxjs‘;

@Component({
   ...
})


export class HttpComponent implements OnInit {


  constructor(private http: HttpClient) { }


  ngOnInit() {
     
    // 并联请求
    const post1 = this.requestData1();
    const post2 = this.requestData2();
    forkJoin([post1, post2])
      .subscribe((data: any) => {
        const postResult1 = data[0]; // ‘/api/post1的返回结果‘
        const postResult2 = data[1]; // ‘/api/post2的返回结果‘
      });
  }


  // 并联请求1
  requestData1() {
    return this.http.get(‘/api/post1‘)
      .pipe((data) => {
        return data;
      });
  }


  // 并联请求2
  requestData2() {
    return this.http.get(‘/api/post2‘)
      .pipe((data) => {
        return data;
      });
  }
}

  

 

以上是关于Angular7 HttpClient处理多个请求的主要内容,如果未能解决你的问题,请参考以下文章

Angular 7 HttpClient 发布响应标头为空

Angular 7. NullInjectorError:没有 HttpClient 的提供者!即使 app.module 有 HttpClientModule。如何解决?

HttpClient 302重定向

MVC HttpClient多个post请求,得到不匹配的响应

Httpclient 该实例已经启动了一个或多个请求。只能在发送第一个请求之前修改属性

对一个 IP 范围的多个 HttpClient 异步请求