写点什么

将使用回调函数作为参数的函数改造为返回 Promise 的一个具体例子

作者:Jerry Wang
  • 2022 年 8 月 17 日
    上海
  • 本文字数:960 字

    阅读完需:约 3 分钟

将使用回调函数作为参数的函数改造为返回 Promise 的一个具体例子

我开发了一个函数 loadScript,可以动态加载指定的本地 JavaScript 文件。源代码如下:


function loadScript(src, callback) {  let script = document.createElement('script');  script.src = src;
script.onload = () => callback(null, script); script.onerror = () => callback(new Error(`Script load error for ${src}`));
document.head.append(script);}
复制代码


然后开发一个函数 promisify,可以将任意传递进来的函数 f,改造成返回参数类型为 Promise 的新函数。


function promisify(f) {  return function (...args) { // return a wrapper-function (*)    return new Promise((resolve, reject) => {      function callback(err, result) { // our custom callback for f (**)        if (err) {          reject(err);        } else {          resolve(result);        }      }
args.push(callback); // append our custom callback to the end of f arguments
f.call(this, ...args); // call the original function }); };}
复制代码


具体的消费方式:


let loadScriptPromise = promisify(loadScript);loadScriptPromise("1.js").then((script) => { console.log('loaded:', script); hello();});
复制代码


其中 1.js 的内容:


function hello(){  console.log("hello!");}
复制代码


下面我们进行单步调试。


待改造的 loadScript,包含两个函数:



调用 promisify,返回一个新的函数。



这个新的函数包含一个闭包 f,可以调用没有 promisify 之前的旧函数。



使用这个新函数加载 1.js:



进入这个新函数内部,执行 executor body:



在函数体内部可以随时访问 callback:



我们期望 script onload 事件发生时,会使用 Promise 自带的 resolve 和 reject 传递参数,因此自己编写了一个 callback 函数,在这个 callback 函数里,使用 Promise 的 resolve 投递结果。


并且期望将这个 callback 函数,传递给原始的 loadScript 函数内部。我们通过 function 原型链上的 call 函数,就达到了调用原始的 loadScript 函数的目的。



并且此时的 callback 函数,确实是我们在 promisify 函数内编写的使用 Promise resolve 传递结果的函数。



稍后,script.onload 异步触发:



通过 resolve,将加载完毕的 script 元素,传递给 promise 对象通过 then 注册的回调函数。




发布于: 刚刚阅读数: 3
用户头像

Jerry Wang

关注

🏆InfoQ写作平台-签约作者🏆 2017.12.03 加入

SAP成都研究院开发专家,SAP社区导师,SAP中国技术大使。2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今。工作中使用 ABAP, Java, JavaScript 和 TypeScript 进行开发。

评论

发布
暂无评论
将使用回调函数作为参数的函数改造为返回 Promise 的一个具体例子_JavaScript_Jerry Wang_InfoQ写作社区