如何将 onload 承诺转换为 Async/Await

Posted 2023-03-07

【中文标题】如何将 onload 承诺转换为 Async/Await

【英文标题】：How can I convert an onload promise into Async/Await

【发布时间】：2016-11-10 04:03:17

【问题描述】：

我有以下 Typescript，我想在上面使用 async/await。但我似乎无法在脑海中弄清楚如何做到这一点。

private getWorkbookFromFile2(excelFile: File): Promise<xlsx.IWorkBook> 
    var loadedPromise = new Promise<xlsx.IWorkBook>((resolve, reject) => 
        var reader = new FileReader();

        reader.onload = (event: any) => 
            var data = event.target.result;

            var workbook = xlsx.read(data,  type: 'binary' );

            console.log(workbook.SheetNames);
            resolve(workbook);
        ;
        reader.readAsBinaryString(excelFile);
    );

    return loadedPromise;

谁能告诉我如何将这个 Typescript 承诺转换为使用 async/await

【问题讨论】：

typescriptlang.org/docs/release-notes/typescript-1.7.html

【参考方案1】：

TypeScript 现在支持原生支持 ES6 生成器的引擎的异步函数，例如节点 v4 及更高版本。异步函数以 async 关键字为前缀； await 暂停执行，直到异步函数返回 promise 完成，并从返回的 Promise 中解包值。 - Source

async function getWorkbookFromFile2(excelFile: File) 
    return new Promise<xlsx.IWorkBook>((resolve, reject) => 
        var reader = new FileReader();

        reader.onload = (event: any) => 
            var data = event.target.result;

            var workbook = xlsx.read(data,  type: 'binary' );

            console.log(workbook.SheetNames);
            resolve(workbook);
        ;
        reader.readAsBinaryString(excelFile);
    );

示例消费：

async function caller() 
    var workbook = await this.getWorkbookFromFile2(this.getFile());
    // The 'workbook' variable is an IWorkBook...

【讨论】：

所以没有办法在阅读器和onload上使用await？

不，没有必要，因为这是您的异步​​操作的最低级别。承诺是当onload 调用resolve 时，您将从该函数返回。那有意义吗？可以说，您基本上是在删除食物链上层的所有样板代码，这样该函数的调用者就可以简单地 await 它，而不是使用旧的链接 API。

@DavidPine 可能会展示一个如何将此函数与await 一起使用以使其成为更完整示例的示例？

@DavidSherret，完成——感谢您的建议（和支持）

知道了！感谢您的回答和解释！