为何Promise回调会在DOM元素插入前执行？jQuery转Promise遇问题

你的问题出在Promise的使用方式不当，以及对async/await和Promise链的时序理解有偏差，具体原因和解决方法如下：

核心问题：不必要的Promise嵌套与异步时序错误 #

你手动用new Promise()包裹了fetch，但fetch本身就返回Promise，这种嵌套属于「Promise构造函数滥用」，很容易引入时序问题。

具体来说，你的do_match函数里，fetch的then回调是一个async函数，但你在这个函数里直接调用了resolve——如果/* do some stuff */里包含未被await的异步操作（比如你可能在处理响应时用了await response.json()但没写全，或者调用了其他异步函数却没等待），resolve会在这些异步操作完成前就触发，导致do_myMarket提前执行，此时DOM元素还未插入，自然会出现elements为空的情况。

另外，即使你没有未被await的操作，手动管理resolve/reject也比直接使用fetch自带的Promise链更容易出错。

正确的解决方法：直接使用fetch的Promise链 #

去掉多余的new Promise()，让do_match直接返回fetch的Promise链，这样then回调会自动等待所有内部异步操作完成后才会resolve，确保do_myMarket在DOM元素插入后执行。

修改后的代码如下：

function do_match() {
  return fetch(/* ... */)
    .then(async function(response) {
      // 示例：处理响应（比如解析JSON），这里的await会暂停执行直到操作完成
      const data = await response.json();
      /* 处理data的逻辑 */
      // 同步插入DOM元素
      document.getElementById("match").insertAdjacentHTML('beforeend', '<div class="player"></div>');
      return "done";
    })
    .catch(function(error) {
      // 统一处理错误，避免静默失败
      console.error("请求或处理出错：", error);
      throw error; // 让后续的catch能捕获到错误
    });
}

function do_myMarket() {
  var elements = document.querySelectorAll('.player');
  // 此时elements已能正确获取到插入的元素
}

// 调用逻辑
do_match().then(do_myMarket);

如果你坚持使用new Promise（不推荐） #

如果一定要手动包裹Promise，必须确保resolve在所有异步操作完成后再调用，同时做好错误处理：

function do_match(resolve, reject) {
  fetch(/* ... */)
    .then(async function(response) {
      try {
        const data = await response.json();
        /* 处理data的逻辑 */
        document.getElementById("match").insertAdjacentHTML('beforeend', '<div class="player"></div>');
        resolve("done"); // 所有操作完成后再resolve
      } catch (error) {
        reject(error); // 捕获内部错误并reject
      }
    })
    .catch(reject); // 捕获fetch本身的错误
}

const p1 = new Promise(do_match);
p1.then(do_myMarket).catch(function(error) {
  console.error("错误：", error);
});

额外注意点 #

• 确保document.getElementById("match")在执行时确实存在，否则insertAdjacentHTML会抛出错误，导致元素无法插入。
• 始终添加错误处理（catch），避免异步操作失败时出现静默错误，难以排查。

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