Question

所以，似乎我对js承诺的理解非常缺乏。我正在使用PDFJS将pdf的所有页面显示为画布的可滚动列表（目前正在工作）。当我调整窗口大小时，我调用这样的函数（我有一个pages数组，它存储了pdf.getPage(index)的所有pdf页面：

// PART A
// This part works, though "pages" is a representation obviously
function reRender() {
  const pages = [
    pdfjsPage0, // the result of pdf.getPage(0)
    pdfjsPage1,
    pdfjsPage2,
  ];

  return pages.reduce((accum, page, index) => accum.then(() => {
    const viewport = page.getViewport(scale);
    const canvas = canvases[index];
    canvas.width = viewport.width;
    canvas.height = viewport.height;
    const ctx = canvas.getContext('2d');
    const renderContext = {
      canvasContext: ctx,
      viewport,
    };
    return page.render(renderContext);
  }), Promise.resolve());
}

但是，这段代码不会按预期工作，因为承诺似乎没有像我期望的那样返回：

// PART B
// This part only somewhat works, though "pages" is a representation obviously
// The promise will return and be resolved before all the pages have actually been rendered
// ie: reRender.then(//somecode), //somecode will execute before the pages have been rendered
function reRender() {
  const pages = [
    pdfjsPage0, // the result of pdf.getPage(0)
    pdfjsPage1,
    pdfjsPage2,
  ];

  let promise = Promise.resolve();  //edited to add "()"

  pages.forEach((page, index) => {
    promise = promise.then(() => {
      const viewport = page.getViewport(scale);
      const canvas = canvases[index];
      canvas.width = viewport.width;
      canvas.height = viewport.height;
      const ctx = canvas.getContext('2d');
      const renderContext = {
        canvasContext: ctx,
        viewport,
      };
      return page.render(renderContext);
    });
  });

  return promise;
}

然而，当抓住页面时，看起来，Promise需要以完全不同的方式构建，因为它可以工作（相同类型的构建不会等待或看起来按照我期望重新呈现的顺序：

// PART C
// This works, nothing in the caller.then will execute until everything
// has resolved here
function getPagesAndAddCanvas(pdf, pages = [], canvas = []) {
    let promise = Promise.resolve();

    for (let i = 1; i <= pdf.numPages; i++) {
      promise = promise.then(() => pdf.getPage(i)
        .then(page => {
          pages.push(page);
          const canvas = angular.element('<canvas></canvas>');
          containerElement.append(canvas);
          canvases.push(canvas[0]);
        })
      )
    }
    return promise;
  }

然而，看起来应该在我的脑海中起作用，因为PDFJS.getPage会返回一个承诺，这在某种程度上是行不通的，让我对我对承诺的理解充满了困惑：

// PART D
// This does not work at all, pdf.getPage in this scenario
// does not seem to ever return
function getPagesAndAddCanvas(pdf, pages = [], canvas = []) {
    const pageLength = Array(pdf.numPages).fill(1);

    return pageLength.reduce((accum, irrelevant, index) => accum.then(() => {
      console.log(pdf);
      console.log(`index: ${index}`); // this is called for index 0
      return pdf.getPage(index)
        .then(page => {
          console.log(page); // this is NEVER called
          pages.push(page);
          const canvas = angular.element('<canvas></canvas>');
          containerElement.append(canvas);
          canvases.push(canvas[0]);
          return Promise.resolve();  //edited to fix spelling
        });
    }), Promise.resolve());
  }

自从A部分和C部分工作以来，有没有人知道这些看起来如何/为何相互矛盾，但是B部分和D部分没有？我在这里撞墙而失去了智慧。

Answer 1

B部分不起作用，因为

let promise = Promise.resolve;

应该是

let promise = Promise.resolve();

（但只使用有效且更清洁的A部分。）

D部分不起作用，因为

          return Promise.resovle();

是一个拼写错误，因为与C部分不同，从index到0的{{1}}循环不同于从numPages-1到{i的{{1}} {1}}。

你真的应该添加一些记录错误的1处理程序，并查看控制台是否有未捕获的异常。

PDFJS并承诺减少

1 个答案: