一种有条件地链接多个可观察对象的更简洁的方法
A more succinct way to conditionally chain multiple observables
我有一种方法可以在 MySQL 数据库上更新 'Request'。此请求可以选择包含附件,在这种情况下,我需要发出额外的 HTTP 请求来更新或添加附件记录(到不同的数据库 table)并上传文件。
我有一个功能性方法来更新请求并可选择跳过附件 HTTP 请求,但我想知道一种更简洁的方法来实现这一点。总的来说,我是 Angular 和 RXJS 的新手,所以 rxjs 运算符的方法和使用可能不是最优的。
基本上,我正在寻找在订阅之前有条件地链接一些可选的可观察对象的最佳方法,或者直接跳到订阅。
我正在寻找 iif 的潜在解决方案,返回 Observable.empty() 和不同的 rxjs 运算符,但是当我只想完全跳过它们时,这些似乎是映射函数中的选项。
onUpdateRequest() {
// if there are no attachments added to the request
if (this.attachments.length <= 0) {
this.callUpdateRequest().subscribe(() => {
// some page and form tidy up
});
// there are attachments, so process the new request and then file uploads
} else {
this.callUpdateRequest().pipe(
switchMap(() => {
return of(this.attachments);
}),
mergeMap(attachments => {
return attachments.map(attachment => {
return attachment;
});
}),
mergeMap(attachment => {
return this.attachmentsService.addAttachmentFile(attachment)
.pipe(map(fileData => {
return fileData;
}));
}),
mergeMap(fileData => {
return this.attachmentsService.addAttachment(
this.requestId, fileData.fileUrl
).pipe(
map(attachments => {
return attachments;
})
);
}),
takeLast(1)
)
.subscribe(() => {
// some page and form tidy up
});
)
}
private callUpdateRequest() {
return this.requestsService.updateRequest(
// all the request params
)
}
在 RxJs 中有一个有用的运算符(也是一个静态方法)iif(),顾名思义,它的工作方式与 JS 类似 if/else。
使用方式
iif(
() => state to check,
o1, // Observable to execute when statement is truthy
o2 // Observable to execute when statement is falsy
)
还有一个defer()
需要按需创建observable(否则JS会先尝试编译一个observable,这可能会导致一些错误,所以我每次传入时都使用它observable 使用的值)。
可以像
一样使用
iif(
() => statmenet to check,
defer(() => o1),
defer(() => o2)
)
而你的代码可能会被改写成下面的方式
getRequest(attachments) {
return iif(
() => attachments.length === 0,
defer(() => this.callUpdateRequest()),
defer(() => this.callUpdateRequest().pipe(
switchMapTo(of(attachments)),
mergeMap(attachments => {
return attachments.map(attachment => {
return attachment;
});
}),
mergeMap(attachment => {
return this.attachmentsService.addAttachmentFile(attachment)
.pipe(map(fileData => {
return fileData;
}));
}),
mergeMap(fileData => {
return this.attachmentsService.addAttachment(
this.requestId, fileData.fileUrl
).pipe(
map(attachments => {
return attachments;
})
);
}),
takeLast(1)
))
);
}
onUpdateRequest() {
this.getRequest(this.attachments).subscribe(() => {
// do whatever you want
})
}
我对您的代码进行了一些拆分,使其更加通用和可测试。
P.S。为什么要写this.attachments.length <= 0
能不能低于0?
我有一种方法可以在 MySQL 数据库上更新 'Request'。此请求可以选择包含附件,在这种情况下,我需要发出额外的 HTTP 请求来更新或添加附件记录(到不同的数据库 table)并上传文件。
我有一个功能性方法来更新请求并可选择跳过附件 HTTP 请求,但我想知道一种更简洁的方法来实现这一点。总的来说,我是 Angular 和 RXJS 的新手,所以 rxjs 运算符的方法和使用可能不是最优的。
基本上,我正在寻找在订阅之前有条件地链接一些可选的可观察对象的最佳方法,或者直接跳到订阅。
我正在寻找 iif 的潜在解决方案,返回 Observable.empty() 和不同的 rxjs 运算符,但是当我只想完全跳过它们时,这些似乎是映射函数中的选项。
onUpdateRequest() {
// if there are no attachments added to the request
if (this.attachments.length <= 0) {
this.callUpdateRequest().subscribe(() => {
// some page and form tidy up
});
// there are attachments, so process the new request and then file uploads
} else {
this.callUpdateRequest().pipe(
switchMap(() => {
return of(this.attachments);
}),
mergeMap(attachments => {
return attachments.map(attachment => {
return attachment;
});
}),
mergeMap(attachment => {
return this.attachmentsService.addAttachmentFile(attachment)
.pipe(map(fileData => {
return fileData;
}));
}),
mergeMap(fileData => {
return this.attachmentsService.addAttachment(
this.requestId, fileData.fileUrl
).pipe(
map(attachments => {
return attachments;
})
);
}),
takeLast(1)
)
.subscribe(() => {
// some page and form tidy up
});
)
}
private callUpdateRequest() {
return this.requestsService.updateRequest(
// all the request params
)
}
在 RxJs 中有一个有用的运算符(也是一个静态方法)iif(),顾名思义,它的工作方式与 JS 类似 if/else。
使用方式
iif(
() => state to check,
o1, // Observable to execute when statement is truthy
o2 // Observable to execute when statement is falsy
)
还有一个defer()
需要按需创建observable(否则JS会先尝试编译一个observable,这可能会导致一些错误,所以我每次传入时都使用它observable 使用的值)。
可以像
一样使用iif(
() => statmenet to check,
defer(() => o1),
defer(() => o2)
)
而你的代码可能会被改写成下面的方式
getRequest(attachments) {
return iif(
() => attachments.length === 0,
defer(() => this.callUpdateRequest()),
defer(() => this.callUpdateRequest().pipe(
switchMapTo(of(attachments)),
mergeMap(attachments => {
return attachments.map(attachment => {
return attachment;
});
}),
mergeMap(attachment => {
return this.attachmentsService.addAttachmentFile(attachment)
.pipe(map(fileData => {
return fileData;
}));
}),
mergeMap(fileData => {
return this.attachmentsService.addAttachment(
this.requestId, fileData.fileUrl
).pipe(
map(attachments => {
return attachments;
})
);
}),
takeLast(1)
))
);
}
onUpdateRequest() {
this.getRequest(this.attachments).subscribe(() => {
// do whatever you want
})
}
我对您的代码进行了一些拆分,使其更加通用和可测试。
P.S。为什么要写this.attachments.length <= 0
能不能低于0?