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

опечатка и потому, что, в отличие от части С, index петли от 0 к numPages-1 в отличие от i, которая идет от 1 к numPages.

Вы действительно должны добавить обработчики .catch(), которые регистрируют ошибки, и взглянуть на консоль для исключенных исключений.