首頁猿問使用 rxjs 以角度發送多個發布請求

使用 rxjs 以角度發送多個發布請求

JavaScript

智慧大石 2023-11-11 21:20:17

我有一個表單，我將姓名作為輸入和計數（數字）。我想將號碼附加到姓名上。例如。如果用戶輸入worker并計數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() 的部分，有更好的方法嗎？

查看完整描述

3 回答

慕的地10843

TA貢獻1785條經驗獲得超8個贊

只需使用范圍運算符，它接受兩個參數；start & count(?range(start: number, count: number): Observable) 并返回一個 Observable，該 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)

? ? ? ? })

? ? ? )

? }

}

反對回復 2023-11-11

墨色風雨

TA貢獻1853條經驗獲得超6個贊

生成是你的朋友：

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。

...然后就取決于你了。從代碼中尚不清楚您的 body 對象是什么樣子，您想要對每個請求執行什么操作以及最終執行什么操作。

反對回復 2023-11-11

婷婷同學_

TA貢獻1844條經驗獲得超8個贊

嘗試這個。例如：

forkJoin([res1, res2, res3, res4, res5])

.pipe(map(data => data.reduce((result,arr)=>[...result,...arr],[])))

.subscribe(data =>{

this.autoCompleteValues = data;

console.log(this.autoCompleteValues);

});

反對回復 2023-11-11

qq_笑_17

TA貢獻1818條經驗獲得超7個贊

mergeMap將值轉換為訂閱的可觀察量

mergeMap(value => observable) 將為您訂閱并發出映射的可觀察值的值。看起來您所需要的只是 mergeMap(body => service(body)) ，然后您就可以開始比賽了。

以下是您使用 RxJS 所做的事情的非常直接的翻譯。如果你的代碼有效，那么（理論上，我無法測試它）這個或非常類似的東西應該可以工作。

我不確定body您的示例中定義的位置，因此我假設它是一個具有某些屬性的對象，并且您要向其添加另一個屬性 ( name)

addItems(){

range(1, this.count).pipe(

map(i => ({

...body,

name: `${this.createItemForm.get('name').value}-${i}`

})),

mergeMap(body => this.cvmService.createServer(body))

).subscribe({

next: resp => {

this.alertify.success('New item was successfully created');

this.close(true);

error: err => this.alertify.error('\n' + err),

complete: () => console.log(`${this.count} items where succesfully created`)

});

}

forkJoin將可觀察數組轉換為響應數組

可以做同樣的事情forkJoin，因為看起來您的服務調用發出一次并完成。

在這里，您首先需要創建所需的服務調用的數組。我通過將數組映射[1,2,3,4,5]到主體對象[{name:worker-1},{name:worker-2},{name:worker-3},{name:worker-4},{name:worker-5}]，然后將主體對象映射到服務調用來實現此目的[observable,observable,observable,observable,observable]。

所有這些都是在沒有任何 RxJS 的情況下完成的，RxJS 部分是forkJoin([observable,observable,...]). 它訂閱每個可觀察對象并等待它們全部完成。

不同之處在于 forkJoin 將以數組形式發出最終結果。如果您仍然想要針對每個結果發出警報并調用 this.close(true)，那么我們需要檢測每個服務調用（數組中的源可觀察對象）來執行此操作。

當您訂閱時，next回調將被給予一個數組。實現如下所示：

addItems(){

forkJoin(

Array.from(

{length: this.count},

(_,i) => i+1

).map(i => ({

...body,

name: `${this.createItemForm.get('name').value}-${i}`

})).map(body =>

this.cvmService.createServer(body).pipe(

tap(_ => {

this.alertify.success('New item was successfully created');

this.close(true);

})

)

).subscribe({

next: resp => {

console.log(`${resp.length} items where succesfully created`);

error: err => this.alertify.error('\n' + err)

});

}

反對回復 2023-11-11

3 回答
0 關注
260 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用 rxjs 以角度發送多個發布請求

使用 rxjs 以角度發送多個發布請求

3 回答

添加回答