TypeScript：使用Promise.all替换图片源时的行为不一致

如何解决TypeScript：使用Promise.all替换图片源时的行为不一致

对于我的SPFx Webpart（使用React / TypeScript），我试图替换某些图像的源，因为必须首先使用另一个Microsoft Graph API调用来检索最初获取的源。

我获取HTML内的所有图像，稍后将使用temporalDivElement.querySelectorAll("img")呈现这些图像，然后检查它们是否需要替换源。如果是这种情况，那么我将调用Graph API来获取新的图像源（如果无法获取图像，则调用一个替换跨度节点）。由于必须遍历所有图像，因此我首先将所有这些请求收集到Promises数组中的Graph API中，然后再使用Promise.all()执行它们。

这是我当前的代码：

  public parseAndFixBodyContent(messageId: string,bodyContent: string) {
    return new Promise<string>(async (resolve,reject) => {
      let temporalDivElement = document.createElement("div");
      temporalDivElement.innerHTML = bodyContent;
      // For hosted content images: fetch hosted content with Graph API,convert to BLOB and then replace existing src attribute with BLOB value
      const imgTags = temporalDivElement.querySelectorAll("img");
      const hostedImagesReplacementPromises: Promise<void>[] = [];
      imgTags.forEach((img) => {
        if (img.src &&
          img.src.indexOf(`/messages/${messageId}/hostedContents/`) > -1) {
            // Hosted Content url found,try to fetch image through API
            let hostedContentApiUrl: string = img.src;
            hostedImagesReplacementPromises.push(this.replaceHostedContentImageSource(hostedContentApiUrl,img));
          }
      });

      Promise.all(hostedImagesReplacementPromises)
      .then(() => {
        resolve(temporalDivElement.innerHTML);
      });
    });
  }

  public replaceHostedContentImageSource(hostedContentApiUrl: string,image: HTMLImageElement) {
    return new Promise<void>(async (resolve,reject) => {
      this.getHostedContentAsBlob(hostedContentApiUrl).then((imageBlobUrl) => {
        image.src = imageBlobUrl;
        resolve();
      })
      .catch(error => {
        // We could not fetch the hosted content for the image
        let missingImageInfo = document.createElement("span");
        missingImageInfo.innerText = `(${strings.ImageNotAvailable})`;
        image.parentNode.replaceChild(missingImageInfo,image);
        resolve();
      });
    });
  }
  
  public getHostedContentAsBlob(hostedContentApiUrl: string) {
    return new Promise<string>(async (resolve,reject) => {
      this.context.msGraphClientFactory
        .getClient()
        .then((client: MSGraphClient): void =>{
          client
            .api(hostedContentApiUrl)
            .version("beta")
            .responseType('blob')
            .get((error,response: Blob,rawResponse?: any) => {
              if (rawResponse.status == 200 && response) {
                const imageUrl: string = URL.createObjectURL(response);
                resolve(imageUrl);
              } else {
                reject(new Error(strings.ErrorCouldNotGetHostedConent));
              }
            });
          })
        .catch(error => {
          reject(error);
        });
    });
  }

此代码有时有效，有时根本无效，有时对一半图像有效，而对另一半图像无效。例如，我在托管内容图像的两个通道回复中都使用了它，有时我会同时获得两个图像，然后我只获得一个图像，而另一个图像则完全没有被替换（甚至连带有替换失败的信息）或两者均未处理。就像有时候诺言没有得到执行，或者至少在渲染之前的正确时间没有实现。

我看不到代码有什么问题，但我想这里存在一些计时问题？

解决方法

如果我找到了此问题的解决方案，我会联系我。

令我惊讶的是，我很遗憾地忘记了我发布了这个问题，但从好的方面来说，我似乎在一天后解决了这个问题。

我记不清了，但看着新代码我相信这确实是一个时间问题或更详细的问题来自试图解决 forEach 循环内的承诺。

我还不是很精通 JS/React，但根据我的理解，promise 也是异步的，所以我之前使用的这段代码是一个很大的禁忌：

  // Some message body content needs to be prepared for the display (fetch hosted content,etc.)
  slicedChannelTopics.forEach((t) => {
    this.parseAndFixBodyContent(t.message.id,t.message.content).then((transformedContent) => {
      if (t.message.contentType && t.message.contentType == 'html' && t.message.content) {
        t.message.content = transformedContent;
      }
    })
    .catch(parseError => {
      console.log(parseError);
    });
  });

我将其更改为首先收集所有承诺，然后使用 Promise.all(...) 解决它们：

let promisesForParseAndFixBodyContent = topicReplies.map((reply) => 
  {
    return this.parseAndFixBodyContent(reply.message,MessageType.Reply);
  });
  Promise.all(promisesForParseAndFixBodyContent).then(() => {
    resolve(topicReplies);
  });

自从进行此更改后，加载托管内容的问题就消失了。