PDFJS与承诺缩减

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;
}

然而，在抓取页面时，似乎需要以完全不同的方式构建承诺，因为这是可行的(相同类型的构建不会等待，也不会按照我期望的顺序重新呈现：

// 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到numPages-1不像从1到numPages运行的i。

您确实应该添加一些记录错误的.catch()处理程序，并查看控制台中是否存在不明确的异常。