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

简介: 将使用回调函数作为参数的函数改造为返回 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 注册的回调函数。

相关文章
|
9月前
|
前端开发 JavaScript API
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(五)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(五)
|
5月前
|
前端开发 JavaScript
异步编程:由于JS是单线程执行的,所以对于耗时的操作(如网络请求),需要通过异步编程来处理。回调函数、Promise、async/await都是常用的异步编程方式。
异步编程:由于JS是单线程执行的,所以对于耗时的操作(如网络请求),需要通过异步编程来处理。回调函数、Promise、async/await都是常用的异步编程方式。
44 1
|
9月前
|
前端开发
前端学习笔记202306学习笔记第四十二天-函数返回promise
前端学习笔记202306学习笔记第四十二天-函数返回promise
31 0
|
9月前
|
前端开发 网络架构
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(二)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(二)
|
9月前
|
前端开发 网络架构
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(一)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map
|
10月前
|
前端开发 JavaScript
JavaScript 中的异步编程:回调函数、Promise 和 async/await
在 JavaScript 编程中,处理异步操作是常见的需求。为了解决异步编程带来的问题,JavaScript 提供了多种方式,包括回调函数、Promise 和 async/await。本文将详细介绍这些异步编程的方法,并谈论它们的优缺点以及适用场景。
|
11月前
|
前端开发 JavaScript
【JavaScript】Promise(零) —— 准备工作(实例对象、函数对象、回调函数分类、捕获抛出错误)
【JavaScript】Promise(零) —— 准备工作(实例对象、函数对象、回调函数分类、捕获抛出错误)
|
前端开发 测试技术
从零开始 - 40行代码实现一个简单Promise函数
对实现规范中的核心部分进行一次编写练习,目的在于跨苏掌握Promise核心原理。
|
前端开发
手写Promise自定义封装 then 函数
手写Promise自定义封装 then 函数
|
2月前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise?
如何处理 JavaScript 中的异步操作和 Promise?
15 1