关于前端:将使用回调函数作为参数的函数改造为返回-Promise-的一个具体例子

52次阅读

共计 1321 个字符,预计需要花费 4 分钟才能阅读完成。

我开发了一个函数 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 注册的回调函数。

正文完
 0