javascript - 服务序列 - 如果第二次失败，则下次用户点击时不要再次调用第一个服务

Question

寻求您的帮助。我是 Angular + RxJS 的初学者，如果这很容易，请不要怪我。

想法是提交表单，其中有许多输入字段，其中之一是图像上传。当用户点击提交按钮时，首先它需要使用添加的文件调用 POST/attachments 服务来获取它的 token 。当此服务返回附件的 token 时，需要在我发送所有表单数据的最终服务调用中使用它。

特殊情况是，如果用户提交表单，第一个带有附件 token 的服务响应，第二个失败，那么当用户再次单击提交按钮时，不应该再次调用/attachments 服务，而只是使用之前获得的附件 token 并调用表单的 POST 服务。

是否可以使用一些 RxJS 运算符或其他功能？我知道我可以让它在我的应用程序中使用一些丑陋的逻辑，但我也想让它变得漂亮。

提交功能的代码是我的第一个版本。

public submitForm(finalData) {
  const { attachment, ...data } = finalData;

  return this.http
    // at first get attachment's token
    .post('/attachments', attachment)
    .pipe(
      switchMap((attachmentToken) => {
        const formData = {
          data,
          attachment: attachmentToken
        };

        // submit form data
        return this.http.post('/submitformdata', formData)
      }),
    );
}

Answer 1

您应该存储附件 token 并基于它进行请求:

attachmentToken: string;

public submitForm(finalData) {
  const { attachment, ...data } = finalData;
  return !this.attachmentToken ? this.attachmentCall(attachment, data) : this.formDataCall(finalData);
}

attachementCall(attachment, data) {
  this.http
    // at first get attachment's token
    .post('/attachments', attachment)
    .pipe(
      switchMap((attachmentToken) => {
        const formData = {
          data,
          attachment: attachmentToken
        };

        this.attachmentToken = attachmentToken;

        // submit form data
        return this.formDataCall(formData);
      }),
    );
}

formDataCall() {
  return this.http.post('/submitformdata', formData);
}