javascript - 异步函数返回 promise ，但调用函数未解析

Question

到目前为止，我已经在这里研究了其他类似的项目，但没有结果，显然需要更好地理解 promise ，但我在这里很挣扎。

我有一个 Ionic 4/Angular 8 项目，其后端基于 Azure。我正在尝试让页面显示来自 Azure 存储的图像，这需要在 URL 中附加一个 key 。

为了避免在每个页面中出现“检查 key ，如果过期则获取新 key ，附加到 url”代码，我想我应该创建一个服务函数来执行此操作。但是，尽管我可以让它工作，但调用函数似乎没有等待“.then”，所以我变得不确定。 (我认为)。理想情况下，我希望服务只返回一个字符串

我的服务功能(带有一些注释和调试o/p)是这样的:

   // Ideally I'd like to just return a string here ---v
 // v- but the async nature needs async return type ??
 async getStorageURLWithKey(url: string): Promise<string> {
  const nowplus5 =  addMinutes(Date.now(), 5); // 5 mins to give some leeway
  console.log(nowplus5);
  console.log(url);
  console.log(this.azurekey);
  if (!this.azurekey || isBefore( this.azurekey.Expires, nowplus5 )) {
    console.log('Getting new Key');
    const keyObj = await this.getAzureKeyServer().toPromise();
    await this.saveAzureKeyStore(keyObj);
    return url + keyObj.Key; // Return the url with the new Key
  } else {
    console.log('Key is valid' + this.azurekey.Expires);
    const rval = new Promise<string>(function(res) {
      res(url + this.azurekey.Key);
    });
    return rval ; // Key is in time so return it with url
  }
 }

我的调用函数是这样的:

getBizImg(): string {
  console.log('GetBizImg');
  if (this.business.Id) {  // We have a Business Object
    this.userService.getStorageURLWithKey(this.business.ImageURL).then((url) => {
      console.log(url);
      return url;
    }, reject => {
      console.log('Rejected:' + reject);
    });
  } else {
    return '';
  }
}

如果我从 ngOninit 调用 getBizImg 函数，它会在 getBizImg - console.log(url) 行之前返回未定义。

这是 ngOninit:

ngOnInit() {
  const imageurl = this.getBizImg();
  console.log(imageurl);
}

实际上，调用应该来自页面:

<ion-content padding>
   <ion-img [src]="getBizImg()" ></ion-img>
</ion-content>

但我已将其注释掉，直到我可以解决此问题。否则它会陷入看似无限的循环。

如果我将 getBizImg() 转换为异步函数并等待调用并返回 promise ，则它可以正常工作 - 如果我将 ngInit 修改为:

ngOnInit() {
  this.getBizImg().then((wibble) => {
    console.log(wibble);
  });
}

和 getBizImg 函数:

async getBizImg(): Promise<string> {
  console.log('GetBizImg ID= ' + this.business.Id);
   if (this.business.Id) {  // We have a Business Object
     const url = await this.userService.getStorageURLWithKey(this.business.ImageURL);
     console.log(url);
     return url;
   } else {
     return '';
   }
 }

但这不会为我提供 HTML 所需的简单字符串。

我不确定我是否遗漏了一些(可能)明显的东西......

**** 编辑更新****我尝试更改为完全异步并包括 Angular 异步管道:

<ion-content padding>
  BIZ IMAGE
<ion-img [src]="getBizImg() | async" ></ion-img>

我还尝试只显示字符串:URL is: {{ getBizImg() |异步 }}

但它进入了一个(看似无限循环)。但这很奇怪，因为它正在访问 this.getAzureKeyServer() 函数，但我没有到达在 GetKey API 调用时在服务器代码中设置的断点。

这让我走上了一条不同的道路，以进一步检查页面功能。我取出对后端的调用，只返回这样的字符串:

<ion-content padding>
  BIZ IMAGE
  URL is: {{ getBizImg() | async }}
</ion-content>

  async getBizImg(): Promise<string> {
    console.log('GetBizImg ID= ' + this.business.Id);
    if (this.business.Id) {  // We have a Business Object
      const url = 'wibble'; // this.business.ImageURL;
      // const url = await this.userService.getStorageURLWithKey(this.business.ImageURL);
      console.log(url);
      return url;
    } else {
      console.log('invalid id');
      return 'invalid id';
    }
  }

...这也进入了无限循环，所以我认为有一些更根本的事情发生...我的意思是我在这里犯了某种小学生错误吗？

Answer 1

getBizImg()永远不会返回 URL，因为您只在 getStorageURLWithKey() 的回调中返回它 promise 。

返回该 promise (并将方法类型更改为 Promise<string> 并使用异步管道来显示它:

getBizImg(): string {
  console.log('GetBizImg');
  if (this.business.Id) {  // We have a Business Object
    // return here
    return this.userService.getStorageURLWithKey(this.business.ImageURL).then((url) => {
      console.log(url);
      return url;
    }, reject => {
      console.log('Rejected:' + reject);
    });
  } else {
    return '';
  }
}

<ion-content padding>
   <ion-img [src]="getBizImg() | async"></ion-img>
</ion-content>