JavaScript 中 Promise 怎么处理动态脚本加载完成-js教程-PHP中文网

用 promise 封装动态脚本加载的核心是监听 script 标签的 load 和 error 事件，通过 new promise 手动创建异步流程，设置 async、crossorigin，成功 resolve、失败 reject 并移除节点；可链式或并行加载，配合缓存和 async/await 提升可维护性。

javascript 中 promise 怎么处理动态脚本加载完成

用 Promise 封装动态脚本加载，核心是监听 <script></script> 标签的 load 和 error 事件，让异步加载行为具备链式调用和错误捕获能力。

手动创建 Promise 封装加载逻辑

这是最常用、最可控的方式：创建 <script></script> 元素，设置 src，在 load 时 resolve，在 error 时 reject。

确保每次加载都新建 script 标签，避免重复插入或缓存干扰
设置 crossOrigin（如需跨域）和 async=true（保持非阻塞）
加载失败时记得移除 DOM 中的 script 节点，防止残留

示例：

function loadScript(src) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.async = true;
    script.crossOrigin = 'anonymous';
<pre class="brush:php;toolbar:false;">script.onload = () => resolve(script);
script.onerror = () => {
  script.remove();
  reject(new Error(`Failed to load script: ${src}`));
};

document.head.appendChild(script);

}); }

// 使用 loadScript('/path/to/module.js') .then(() => console.log('Loaded')) .catch(err => console.error(err));

处理依赖顺序：链式加载多个脚本

当多个脚本有执行依赖（比如 jQuery → 插件），可用 .then() 串行加载，或用 Promise.all() 并行加载（无依赖时更高效）。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

串行：前一个完成再加载下一个，适合有全局变量依赖的场景
并行：所有请求同时发出，全部成功才 resolve，适合模块化、无副作用脚本
注意：并行加载不保证执行顺序，但现代 ES 模块或 UMD 包通常自身处理依赖

避免重复加载同一脚本

多次调用 loadScript('a.js') 可能触发多次请求。可加简单缓存机制：

用 Map 或对象记录已加载成功的 URL → Promise 实例
后续请求直接返回缓存的 Promise，无需新建 script
不缓存失败 Promise（除非明确要“记住失败”）

示例缓存逻辑：

const loadedScripts = new Map();
<p>function loadScript(src) {
if (loadedScripts.has(src)) {
return loadedScripts.get(src);
}</p><p>const promise = new Promise(/<em> ...同上... </em>/);
loadedScripts.set(src, promise);
return promise;
}</p>

配合 async/await 提升可读性

在支持 async 函数的环境中，用 await 替代嵌套 .then()，代码更接近同步写法：

适合初始化逻辑、按需加载组件脚本等场景
错误可用 try/catch 统一捕获，比 .catch() 更直观
注意：await 只在 async 函数内有效，不能直接写在顶层（除非用 top-level await）

示例：

async function initApp() {
  try {
    await loadScript('/lib/jquery.min.js');
    await loadScript('/js/app.js');
    console.log('All ready');
  } catch (err) {
    console.error('Init failed:', err);
  }
}

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南