调用服务时异步调用不起作用 - Angular 8

Posted 2023-02-19

【中文标题】调用服务时异步调用不起作用 - Angular 8

【英文标题】：Async call not working when calling service - Angular 8

【发布时间】：2021-08-19 00:51:44

【问题描述】：

在使用httpClient，post方法调用API服务时，同步不起作用，不等待响应返回

组件.ts

this.juiciosService.createJuicio(this.juicio).then(
    (res: any) => 
      if(res.ok == 200)
        Swal.fire(
          //position: 'top-end',
          icon: 'success',
          title: 'Cedula agregada con exito',
          showConfirmButton: false,
          timer: 2000
        )
        this.detalleJuicio(res.data)
      
      else 
        Swal.fire(
          //position: 'top-end',
          icon: 'success',
          title: 'No se pudo agregar la cedula',
          showConfirmButton: false,
          timer: 2000
        )
      
      this.spinnerService.hide();
    
  )

service.ts

  async createJuicio(juicio): Promise<Juicio> 
    console.log(juicio);
    const url = this.API_URL + 'juicios/Crearjuicios/';
    return await this.http
      .post<Juicio>(url, juicio).toPromise()
      .then(res => res)
  

【问题讨论】：

因为你使用的是 Promise#then 回调，所以你根本不需要 async/await。

【参考方案1】：

您可以将代码更改为：

async methodName()

  let res = await this.juiciosService.createJuicio(this.juicio);
  if(res.ok == 200)
     Swal.fire(
          //position: 'top-end',
          icon: 'success',
          title: 'Cedula agregada con exito',
          showConfirmButton: false,
          timer: 2000
     );
     this.detalleJuicio(res.data)
  
  else
   
   Swal.fire(
          //position: 'top-end',
          icon: 'success',
          title: 'No se pudo agregar la cedula',
          showConfirmButton: false,
          timer: 2000
        )
    
  

这样它就可以作为一个异步函数工作。

另外，不要忘记对其中一个函数进行异常处理。因为似乎如果您的 HTTP 调用失败，Spinner 将不会隐藏。