使用rxjs在angular中发送多个post请求

Question

我有一个表单，我将name作为输入，count(number)作为输入。

我想把数字加到名字后面。例如。

如果用户输入worker和count 5。我想附加从1开始的数字，直到计数为5，它将类似worker-1，worker-2，worker-3，worker-4，worker-5。

然后，我想向服务器发送多个请求，以将这些工作进程添加到数据库中。

我目前正在做这样的事情。

addItems() {

    for (let i = 1; i <= this.count; i++) {
        body.name = this.createItemForm.get('name').value + '-' + i;
        this.add(body);
      }

 }

add(body: formBody) {
    this.cvmService.createServer(body).subscribe(() => {
      this.alertify.success('New item was successfully created');
      this.close(true);
    }, error => {
      this.alertify.error('\n' + error);
    });
  }

我的问题是，我如何使用rxjs来做这件事，哪个操作符是最好的。特别是在for循环中调用add()的部分，有没有更好的方法呢？

Answer 1

generate是你的朋友：

const baseName = this.createItemForm.get('name').value + '-';

generate(1, x => x <= this.count, x => ++x).pipe(
  map(val => baseName + val),
).subscribe(bodyName => {
 // do something with your worker-1 .... worker-count
});

generate将生成从1到输入计数的序列。

map只会将你的前缀(例如'worker')和数字连接起来生成bodyName。

...and，那就看你的了。从代码中看不出你的body对象是什么样子的，你想对每个请求做什么动作，最后是什么动作。

Answer 2

只需使用range运算符，它就可以接受两个参数；start & count (range(start: number, count: number): Observable)并返回一个可观察的对象，该对象发出一个数字序列，您可以根据需要对其进行转换。

考虑以下示例：

interface Body {
  name: string
}

class Component {
  constructor(
    private alertify: Alertify,
    private cvmService: CvmService
  ) { }

  public addMany(count: number, base: string): void {
    return range(1, count).pipe(

     /**
      * transform each emitted number into a @Body
      */

      map(number => { 
        const body: Body = { name: `${base}${number}` };
        return body;
      }),

      toArray(), // <-- collect emitted values

     /**
      * transform the array of @Body[] returned by @toArray() into an 
      * array of Observables and use @forkJoik operator to wait for all
      * Observables to complete
      */

      switchMap(array => forkJoin(array.map(body => this.addOne(body))))
    ).subscribe(() => console.log("done!"))
  }


  /**
  * transform each body into an Observable 
  * without subscribing to it
  * use @tap operator to listen for events that will be raised
  * by future subscriptions
  */

  public addOne(body: Body): Observable<void> {
    return this.cvmService.createServer(body)
      .pipe(
        tap({
          next: () => this.alertify.success('New item was successfully created'),
          error: error => this.alertify.error('\n' + error)
        })
      )
  }
}

Answer 3

尝尝这个。例如：

forkJoin([res1, res2, res3, res4, res5])
.pipe(map(data => data.reduce((result,arr)=>[...result,...arr],[])))
.subscribe(data =>{

  this.autoCompleteValues = data;
  console.log(this.autoCompleteValues);
});