如果找不到，请下载图像，然后使用 async / promise 显示它

Question

我有这段代码，但没有按我的意愿工作。

目的是检查是否找到文件。如果找到，则显示它。如果找不到，则下载并显示它。 我想使用 Promise 解析 base64 图像并在 src 属性中使用它。

第一次运行是下载文件，但不显示它们。 在随后的运行中，如果我直接调用“readAsDataURL”，我可以看到图片，但如果我调用“getphoto”，即使文件在这里，也不会显示任何内容。

我很确定问题出在“getphoto”函数的返回类型上，但我无法全神贯注地让它工作。

代码如下：

  async getPhoto(id: string) {
    this.file.checkFile(this.file.dataDirectory, id).then ( exist => {
      if (exist) {
        return this.file.readAsDataURL(this.file.dataDirectory, id);
      } else {
        this.httpService.downloadMedia(id).subscribe(img => {
          this.createFile(id, img).then( () => {
            return this.file.readAsDataURL(this.file.dataDirectory, id);
          });;
        });        
      }
    }, (error) => { 
      if (error['message'] == 'NOT_FOUND_ERR') {
        this.httpService.downloadMedia(id).subscribe(img => {
          this.createFile(id, img).then( () => {
            return this.file.readAsDataURL(this.file.dataDirectory, id);
          });
        });        
      }
    })
  }

  async createFile(path: string, img: Blob) {
    this.file.checkFile(this.file.dataDirectory, path).then(exist => {
      if (!exist) {
        this.file.writeFile(this.file.dataDirectory, path, img)
          .then(result => {
          })
      } else {
      }
    })
      .catch(errorCheck => {
        this.file.writeFile(this.file.dataDirectory, path, img)
          .then(result => {
          })
      })
  }

html页面端

    <ion-img class="photo_card img-centered" [src]="photoB64 | async" (click)="openPhoto(photoB64)" > </ion-img>

ts 控制器端

    this.photoB64 = this.fileService.getPhoto(''+this.nichoir.mediafiles[this.indexPhoto].id);

Answer 1

Angular 使用 Observable。所以你需要使用toPromise()方法正确使用async和await关键字：

async getPhoto(id: string) {
    let file;
    try {
        
        let exist = await this.file.checkFile(this.file.dataDirectory, id).toPromise(); 
        console.log(`exist is: `, exist);    
        if (exist) {
            file = this.file.readAsDataURL(this.file.dataDirectory, id).toPromise();
        }
        else {
            let img = await this.httpService.downloadMedia(id).toPromise();
            let result = await this.createFile(id, img).toPromise();
            file = await this.file.readAsDataURL(this.file.dataDirectory, id).toPromise();;
        }
    }
    catch(ex) {
        let img = await this.httpService.downloadMedia(id).toPromise();
        let result = await this.createFile(id, img).toPromise();
        file = await this.file.readAsDataURL(this.file.dataDirectory, id).toPromise();;
    }   
}