异步等待功能

Question

async onSubmit() {
    await this.service.uploadFile(this.requestBody).subscribe((response: any) => {
      if (response.status === 'OK') {
        this.rowData2 = response.payload.contents;
        this.service.getPlan(this.form.value).subscribe((responsePlan: any) => {
          this.toastrService.show(
            'success',
            'MTI - AP Upload File',
            {
              status: 'success',
              duration: 5000,
            },
          );
          toastRef.close();
        });
          
      } else {
        this.toastrService.show(
          'error',
          'MTI - AP Upload File',
          {
            status: 'warning',
            duration: 5000,
          },
        );
        this.getLog(this.currentPage, this.paginationPageSize);
        toastRef.close();
      }
    });
    await this.service.getValidateLog(this.requestBody.filename);
    await this.service.getLogUpload(this.requestBody.filename);
  }

** `我的目的是从上传文件异步运行代码，并向用户显示成功， getvalidatelog，这个函数返回哪个交易是正确的（由我的后端检查） getlogupload 我的意思是向表格显示要显示的详细信息。 但是这段代码不起作用我该如何解决它？

Answer 1

我认为

this.service.uploadFile

返回

Observable

，因此在

await

 上使用 

this.service.uploadFile().subscribe()

并没有真正意义

subscribe()

是一种返回

Subscription

的方法，我认为它对

await

Subscription

没有意义。

您有 2 个选择：

选项 1：将 Observable 映射到 Promise

Promise

不是邪恶也不被弃用。当您进行具有一个响应的 API 调用时，使用

Promise

在语义上是有意义的

使用

firstValueFrom()

将您的

Observable

映射到

Promise

并仅使用

Promise

async onSubmit() {
    const response = await firstValueFrom(this.service.uploadFile(this.requestBody));

    if (response.status === 'OK') {
        // [...] same code as yours
    } else {
        // [...] same code as yours
    }
    await this.service.getValidateLog(this.requestBody.filename);
    await this.service.getLogUpload(this.requestBody.filename);
}

注意：由于缺乏上下文，不清楚发生错误时会发生什么。如果 uploadFile 仍然返回结果但带有

response.status = 'ERROR'

，则此代码将起作用。但如果它抛出异常，您将必须用 try/catch 包围调用，如下所示：

async onSubmit() {
    try {
        const response = await this.service.uploadFile(this.requestBody);

        // [] Here, the code that you put in the "OK block" 
    } catch {
        // [] Here, the code that you put in the "ERROR block"
    }

    await this.service.getValidateLog(this.requestBody.filename);
    await this.service.getLogUpload(this.requestBody.filename);
}

选项2：继续使用Observable

在这种情况下，请删除

await

关键字

然后，API 响应之后发生的行应该放入您传递给

subscribe

函数的回调中：

onSubmit() {
    // Notice the async keyword in the callback !
    this.service.uploadFile(this.requestBody).subscribe(async(response: any) => {
        if (response.status === 'OK') {
          // [...] same code as yours

        } else {
          // [...] same code as yours
        }
        await this.service.getValidateLog(this.requestBody.filename);
        await this.service.getLogUpload(this.requestBody.filename);
    });
}

注释：

• 在这种情况下，提交函数本身不再需要是

  async

  ，因为其中不再有

  await

• 但请注意，传递给

  subscribe()

  函数的回调变成了

  async

  :

  .subscribe(async(response: any) => [...])