如何将使用回调函数作为参数的函数改造为返回 Promise 的函数

2023-12-21 23:36:45

在前端开发中，经常需要动态加载额外的 JavaScript 文件来满足不同的需求，例如引入第三方库或加载模块化的代码。传统的做法是使用<script>标签来加载脚本，但是这种方式存在一些问题，例如阻塞页面渲染、顺序加载等。为了解决这些问题，可以使用异步加载的方式来加载脚本，例如使用回调函数或 Promise。

下面是一个使用回调函数加载脚本的示例：

function loadScript(url, callback) {
  const script = document.createElement('script');
  script.src = url;
  script.onload = callback;
  document.head.appendChild(script);
}

loadScript('script.js', () => {
  // 脚本加载完成后的处理逻辑
});

这种方式虽然可以实现异步加载，但是存在一个问题，就是无法得知脚本是否加载成功。为了解决这个问题，可以使用 Promise 来实现异步加载。

下面是一个使用 Promise 加载脚本的示例：

function loadScript(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.onload = () => {
      resolve();
    };
    script.onerror = () => {
      reject();
    };
    document.head.appendChild(script);
  });
}

loadScript('script.js')
  .then(() => {
    // 脚本加载完成后的处理逻辑
  })
  .catch(() => {
    // 脚本加载失败后的处理逻辑
  });