订阅结束时显示提醒

Question

我需要一些帮助...

有两个端点。

updateVariable（更新每个修改的变量，可以是 2 个或更多）。
updateDocument（更新文档，只发生一次）。

我需要在更新所有可用变量后更新文档。这是我的代码，它可以工作，但速度很慢。它正在等待完成更新一个变量以进行下一个。我知道使用 mergeMap 我可以同时更新所有变量，但我不知道实现它的最佳方法是什么。

  async onClickUpdateForm() {
    let variables = this.componenList.getForm;

    for await (let x of this.documentContent.variables) {
      var var_id: string = x._id;
      
      var category = variables.find((e) => e.category == x.category.name);
      
      // *THIS IS JUST ELEMENTS TO ADD IN THE OBJECT TO SEND*
      var element = category.parameters.find(
        (e: { name: any }) => e.name == x.name
      );

      if (!x.isAConditional) {
        var dataToSend = {
          isAConditional: x.isAConditional,
          name: element.name,
          label: element.label,
          description: x.description,
          type: element.type,
          values: element.values,
          html_content: x.html_content,
          position: x.position,
          quantity: x.quantity,
          placeholder: element.placeholder,
          isRequired: element.isRequired,
        };
      } else {
        var dataToSend = {
          isAConditional: x.isAConditional,
          name: x.name,
          label: x.label,
          description: x.description,
          type: x.type,
          values: x.values,
          html_content: x.html_content,
          position: x.position,
          quantity: x.quantity,
          isRequired: x.isRequired,
          placeholder: x.placeholder,
        };
      }

      // *UPDATING VARIABLE*
      await this._documentService
        .updateVariable(dataToSend, this.documentId, var_id)
        .pipe(take(1))
        .toPromise()
        .then((x) => {
          console.log(x);
        });
    }

    let dataToUpdate: any = {
      name: this.nameForm,
      description: this.descriptionForm,
      owner: this.userId,
      status_doc: 'EDIT_FORM',
    };

    // *UPDATING DOCUMENT*
    this._documentService
      .updateDocument(dataToUpdate, this.documentId)
      .pipe(take(1))
      .subscribe((x) => {
        console.log(x);
        this._messageService.add({
          severity: 'success',
          summary: 'Updated',
          detail: 'The form was updated.',
        });
      });
  }

谢谢大家！

Answer 1

你可以在 JS 中使用 Promise.all，即等待所有的承诺被解决。例如：

async onClickUpdateForm() {
    let variables = this.componenList.getForm;

    // ---> Wait for all promises to be resolved
    await Promise.all(this.documentContent.variables.map((x) => {
      var var_id: string = x._id;
      
      // your logic here...

      // *UPDATING VARIABLE*
      return this._documentService
        .updateVariable(dataToSend, this.documentId, var_id)
        .pipe(take(1))
        .toPromise();
    }));

    let dataToUpdate: any = {
      name: this.nameForm,
      description: this.descriptionForm,
      owner: this.userId,
      status_doc: 'EDIT_FORM',
    };

    // *UPDATING DOCUMENT*
    this._documentService
      .updateDocument(dataToUpdate, this.documentId)
      .pipe(take(1))
      .subscribe((x) => {
        console.log(x);
        this._messageService.add({
          severity: 'success',
          summary: 'Updated',
          detail: 'The form was updated.',
        });
      });
  }

更多信息在这里：https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Answer 2

从外观上看，您有两个独立的可观察源。要处理一个并在完成后处理另一个，您可以使用 concat(obs1, obs2).

应该是这样的。

onClickUpdateForm() {
  let variables = this.componenList.getForm;
  let dataToUpdate: any = {
    name: this.nameForm,
    description: this.descriptionForm,
    owner: this.userId,
    status_doc: 'EDIT_FORM',
  };
  
  concat(
    from(this.documentContent.variables).pipe(
      mergeMap(x => {
        ... // <-- all your mapping
        return this._documentService.updateVariable(dataToSend, this.documentId, var_id)  
      });
    ),
    this._documentService.updateDocument(dataToUpdate, this.documentId)
  ).pipe(
    tap({
      complete: () => {
        this._messageService.add({
          severity: 'success',
          summary: 'Updated',
          detail: 'The form was updated.',
        });
      }
    })
  ).subscribe()
}

干杯

订阅结束时显示提醒

Show alert when subscribe ends

angular

rxjs

observable