javascript - javascript promise 的语法问题

Question

我正在使用 pdfjs 读取 pdf 文件并将其页面作为图像获取。加载所有图像后，我需要调用 ajax 来发送和从服务器获取详细信息。 pdf 中迭代页面的代码取自此处:https://ourcodeworld.com/articles/read/405/how-to-convert-pdf-to-text-extract-text-from-pdf-with-javascript

在获取上述所有必需的详细信息后，我在编写将调用 ajax 函数的 promise 语法时遇到问题。

这是我的代码:

getDataUrlsAndSizesFromPdf(file).then(proceedAndCheckOnServer(file));

const getDataUrlsAndSizesFromPdf = function(file) {
    PDFJS.disableWorker = true;
    fileReader = new FileReader();
    fileReader.readAsArrayBuffer(file);

    return new Promise(function(resolve, reject) {
        fileReader.onload = function(ev) {   
            PDFJS.getDocument(fileReader.result).then(function (pdf) {
                var pdfDocument = pdf;
                var pagesPromises = [];

                for (var i = 0; i < pdf.pdfInfo.numPages; i++) {
                    var pageNum = i + 1;

                    pagesPromises.push(getImageUrl(pageNum, pdfDocument));
                }

                Promise.all(pagesPromises).then(function () {
                    console.log(pdfPagesInfo);

                    resolve();
                }, function () {
                    console.log('failed');

                    reject();
                });
            }, function (reason) {
                console.error(reason);
            });
        }
    });
}

function getImageUrl() {
    return new Promise(function (resolve, reject) {
        PDFDocumentInstance.getPage(pageNum).then(function (pdfPage) {
            var scale = 1;
            var viewport = pdfPage.getViewport(scale);

            var canvas = document.getElementById('dummy-canvas');
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            var task = pdfPage.render({canvasContext: context, viewport: viewport})
            task.promise.then(function(){
                var sizesArr = {
                    height : viewport.height,
                    width : viewport.width
                }
                pdfPagesInfo.sizes[pageNum.toString()] = sizesArr
                pdfPagesInfo.images[pageNum.toString()] = canvas.toDataURL('image/jpeg');

                resolve();
            });
        });
    });
}

function proceedAndCheckOnServer() {
    ....
}

我想要的是在从“getImageUrl()”获取所有详细信息后执行“proceedAndCheckOnServer()”。但是目前，执行直接转到“proceedAndCheckOnServer()”，而无需等待“getDataUrlsAndSizesFromPdf”的 promise 得到解决。我是 javascript promises 的新手。请帮助我语法。

Answer 1

您正在调用您的函数而不是使用回调函数。

proceedAndCheckOnServer 被调用，该函数的结果被用作 then 的参数。

getDataUrlsAndSizesFromPdf(file).then(proceedAndCheckOnServer(file));

尝试其中之一:

getDataUrlsAndSizesFromPdf(file).then(()=>proceedAndCheckOnServer(file));

getDataUrlsAndSizesFromPdf(file).then(function(){ proceedAndCheckOnServer(file) });

或者使用 file 解决您的 getDataUrlsAndSizesFromPdf promise ，并使用不带 () 的函数来管道化结果。

getDataUrlsAndSizesFromPdf(file).then(proceedAndCheckOnServer);