如何将jQuery load()回调封装为Promise以配合await Promise.all使用

核心问题有两点：

1. 你写的Promise包装函数没有利用jQuery load方法的完成回调触发Promise状态变更，导致Promise一直处于pending状态，await逻辑永远不会向下执行
2. 原init_page函数没有添加async关键字，直接在内部使用await会触发语法错误

正确的包装函数实现 #

function loadPromiseWrapper(dom_selector, filename) {
  return new Promise((resolve, reject) => {
    // load 方法第三个参数为加载完成后的回调函数
    $(dom_selector).load(filename, (response, status, xhr) => {
      if (status === 'error') {
        // 加载失败时标记Promise为失败状态
        reject(new Error(`加载资源${filename}失败：${xhr.statusText}`))
      } else {
        // 加载成功时标记Promise为成功状态，可按需返回加载结果
        resolve({
          selector: dom_selector,
          content: response
        })
      }
    })
  })
}

修正后的页面初始化逻辑 #

// 函数前必须加async关键字，才能在内部使用await
async function init_page() {
  const init_tasks = [
    loadPromiseWrapper("#divA", "page1.html"),
    loadPromiseWrapper("#divB", "page2.html"),
    loadPromiseWrapper("#divC", "page3.html")
  ]

  try {
    // 等待所有加载任务全部完成
    await Promise.all(init_tasks)
    // 所有内容加载完成，在此处执行后续任务
  } catch (error) {
    // 任意一个加载任务失败都会进入此处，可按需添加错误处理逻辑
    console.error('页面初始化出错', error)
  }
}

额外说明 #

• 如果允许部分模块加载失败仍要执行后续逻辑，可把Promise.all替换为Promise.allSettled，之后自行遍历结果判断每个模块的加载状态即可。
• 调用loadPromiseWrapper时注意传入正确的jQuery选择器，比如id选择器需要带#前缀。

内容的提问来源于stack exchange，提问作者bikz