PDFJS和承诺减少

Question

所以，看起来我对js承诺的理解还相当缺乏。我正在使用PDFJS将PDF的所有页面显示为可滚动的画布列表（目前正在工作）。当我调整窗口的大小，我这样调用的函数（我有一个pages阵列中存储所有的PDF页面从pdf.getPage(index)：

// 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(); 

（但只是用其中一部分工作是清洁）。

---

部分d不起作用，因为

  return Promise.resovle(); 

是一个错字因为，相比于C部分，在index循环从0到numPages-1不像i运行从1到numPages。

您确实应该添加一些记录错误的处理程序，并查看控制台上的未捕获异常。