在 Promise 解析时调用实例是一种方式，而不是另一种方式

Question

我正在尝试使用 Apryse 的 webViewer 方法加载 PDF URL。当我使用他们的文档中指定的方法时，它会按预期工作（如下所示）。但我不想在每个函数调用时都初始化一个新的 webViewer，因此我尝试初始化一次 webViewer 并在实例上调用

loadDocument()

，但这不起作用。我没有收到任何错误或任何东西。我做错了什么？

函数调用：

loadDocViewer('https://pdfobject.com/pdf/sample.pdf')

不起作用：

let webViewerInstance;

WebViewer({
    path: '/@pdftron/webviewer/public',
}, document.getElementById('doc-viewer'))
    .then(instance => {
        webViewerInstance = instance
    })
    .catch(error => {
        console.error('Error initializing WebViewer:', error);
    });

function loadDocViewer(url) {
    if (!webViewerInstance) {
        console.error('Doc Viewer is not initialized! Try again in a bit.');
        return;
    }

    webViewerInstance.UI.loadDocument(url);
}

作品：

function loadDocViewer(url) {
    WebViewer({
        path: '/@pdftron/webviewer/public',
    }, document.getElementById('doc-viewer'))
        .then(instance => {
            instance.UI.loadDocument(url);
        })
        .catch(error => {
            console.error('Error initializing WebViewer:', error);
        });
}

Answer 1

但我不想每个函数都初始化一个新的webViewer

在这种情况下，我建议您将承诺保存到变量中并重用它：

let promise;
function loadDocViewer(url) {
  if (!promise) {
    promise = WebViewer(
      {
        path: "/@pdftron/webviewer/public",
      },
      document.getElementById("doc-viewer"),
    );
  }

  return promise
    .then((instance) => {
      return instance.UI.loadDocument(url);
    })
    .catch((error) => {
      console.error("Error initializing WebViewer:", error);
    });
}

loadDocViewer 第一次运行时，它将创建 Promise，然后必须等待一段时间才能解析。后续的时间就不用再等待了，因为承诺已经解决了。