Angular：承诺内的异步等待-事件侦听器

在这个问题上我已经挣扎了一天了。 我想创造这种情况：

<img [src]="userdp | async" />

在getUserDp（）中，以下是代码：

async getUserDp() {
    return await
    this._http.get(APIvars.APIdomain+'/'+APIvars.GET_USER_DP,  { responseType: 'blob' }).toPromise().then( image => {
        if(image['type'] === 'application/json') {
          return null;
        }
        const reader = new FileReader();
        reader.addEventListener('load', () => {
           **return this._dom.bypassSecurityTrustResourceUrl(reader.result.toString());**
        });
        }, false);
        if (image) {
          reader.readAsDataURL(image);
        }
    });
  }

Promise没有等待读卡器加载到EventListener中，任何立即返回语句都会给出预期的结果，粗体的一行是要返回的主要数据

谢谢

取代您的承诺

    reader.onload = function (e) {
       
    }; 

---

通过创建一个承诺返回的FileReader方法，您可以在一个地方摆脱回调业务，从而使您的生活更轻松——以及未来代码读者的生活更轻松

// return a promise that resolves on the 'load' event of FileReader
async function readAsDataURL(image) {
  const reader = new FileReader();
  return new Promise((resolve, reject) => {
    reader.addEventListener('load', () => {
      resolve(reader.result.toString());
    });
    // consider adding an error handler that calls reject
    reader.readAsDataURL(image);
  });
}

现在，文件处理代码已经“promisified”，它更容易使用

async getUserDp() {
  // temp vars so we can read the code
  const url = APIvars.APIdomain+'/'+APIvars.GET_USER_DP;
  const options = { responseType: 'blob' };
  
  // await replaces .then() here
  const image = await this._http.get(url,  options).toPromise();
  
  // not sure whether this is right, just following OP logic here
  // bail if the image (result of the get()) is falsey or is of type json
  if (!image || image['type'] === 'application/json') return null;
  
  // simple to call to await file reading
  const readerResult = await readAsDataURL(image);
  return this._dom.bypassSecurityTrustResourceUrl(readerResult);
}  

---

你能解释一下吗？我对异步有点陌生

async getUserDp() {
  // temp vars so we can read the code
  const url = APIvars.APIdomain+'/'+APIvars.GET_USER_DP;
  const options = { responseType: 'blob' };
  
  // await replaces .then() here
  const image = await this._http.get(url,  options).toPromise();
  
  // not sure whether this is right, just following OP logic here
  // bail if the image (result of the get()) is falsey or is of type json
  if (!image || image['type'] === 'application/json') return null;
  
  // simple to call to await file reading
  const readerResult = await readAsDataURL(image);
  return this._dom.bypassSecurityTrustResourceUrl(readerResult);
}