WebSocket回调函数内暂停执行以等待Fetch请求完成的解决方案咨询

这问题我太熟了，其实有两个很直接的方案，咱们一步步来拆解：

方案1：把WebSocket回调改成async函数（推荐） #

WebSocket的回调函数完全可以声明为async，这样你就能在里面正常使用await了，代码逻辑也会更清晰，避免嵌套回调。

修改后的代码如下：

socket.on('receive_message', async function(data) { // 这里添加async关键字
  let messaged_user_li = document.getElementById('messaged_user_li'+data['from_user']); 
  console.log('messaged_user_li: '+messaged_user_li) 
  
  if (messaged_user_li == null) { 
    console.log('if fired') 
    // 用await简化Fetch调用，避免嵌套then
    try {
      const response = await fetch('/get_messaged_user/'+data['from_user']); // 注意原代码里的from_user应该是data['from_user']
      const data2 = await response.json();
      loadMessagedUser(data2[0].id, data2[0].avatar, data2[0].username, data2[0].last_seen); 
      messaged_user_li = document.getElementById('messaged_user_li'+data['from_user']); 
    } catch (err) {
      console.error('获取用户信息失败:', err);
      // 这里可以加错误处理逻辑，比如提示用户或者跳过后续操作
      return;
    }
  } 
  
  // 下面的代码会等待Fetch完成后再执行
  console.log('messaged_user_li: '+messaged_user_li) 
  let message_user = document.getElementById('message_user'+data['from_user']); 
  let message_target = document.getElementById("message_target"+data['from_user']); 
  
  if (!messaged_user_li.classList.contains('active')) { 
    messaged_user_li.classList.add('flash-message'); 
  } 
  
  if (message_user != null) { 
    // 用模板字符串更清晰，避免覆盖原data变量
    const messageHtml = ` <li class="clearfix"> <div class="message-data text-right"> <span class="message-data-time">just now</span> </div> <div class="message other-message float-right">${data['message']}</div> </li>`; 
    message_target.innerHTML += messageHtml; 
    // 滚动到底部
    const myDiv = message_user.querySelector(".chat-history"); 
    myDiv.scrollTop = myDiv.scrollHeight; 
  } 
});

这个方案的优势： #

• 代码逻辑线性化，比嵌套then好读太多
• 可以用try/catch统一处理Fetch的错误，避免请求失败后代码卡住
• 完全不需要调整原有逻辑的结构，只是加个async和await就行

方案2：用Promise链式调用包裹后续逻辑（不修改回调的async属性） #

如果你不想把整个回调改成async，可以把需要等待Fetch完成的代码抽成一个函数，放到Fetch的then链里执行：

socket.on('receive_message', function(data) { 
  let messaged_user_li = document.getElementById('messaged_user_li'+data['from_user']); 
  console.log('messaged_user_li: '+messaged_user_li) 
  
  // 把后续重复的逻辑抽成函数
  function processMessage() {
    console.log('messaged_user_li: '+messaged_user_li) 
    let message_user = document.getElementById('message_user'+data['from_user']); 
    let message_target = document.getElementById("message_target"+data['from_user']); 
    
    if (!messaged_user_li.classList.contains('active')) { 
      messaged_user_li.classList.add('flash-message'); 
    } 
    
    if (message_user != null) { 
      const messageHtml = ` <li class="clearfix"> <div class="message-data text-right"> <span class="message-data-time">just now</span> </div> <div class="message other-message float-right">${data['message']}</div> </li>`; 
      message_target.innerHTML += messageHtml; 
      const myDiv = message_user.querySelector(".chat-history"); 
      myDiv.scrollTop = myDiv.scrollHeight; 
    } 
  }

  if (messaged_user_li == null) { 
    console.log('if fired') 
    fetch('/get_messaged_user/'+data['from_user'])
      .then(response => response.json())
      .then(data2 => { 
        loadMessagedUser(data2[0].id, data2[0].avatar, data2[0].username, data2[0].last_seen); 
        messaged_user_li = document.getElementById('messaged_user_li'+data['from_user']); 
        processMessage(); // 加载完用户后执行后续逻辑
      })
      .catch(err => {
        console.error('获取用户信息失败:', err);
      });
  } else {
    processMessage(); // 如果用户已存在，直接执行后续逻辑
  }
});

这个方案的适用场景： #

• 你不想修改回调的async属性（虽然其实完全没必要顾虑这个）
• 需要兼容非常老的浏览器（不过现在async/await已经是主流支持了）

额外小提示 #

1. 原代码里的from_user应该是data['from_user']，不然会报变量未定义的错误，我在上面的代码里已经修正了
2. 尽量不要用data作为HTML字符串的变量名，容易覆盖WebSocket回调的data参数，改成messageHtml更清晰
3. 一定要加错误处理（catch或者try/catch），不然Fetch请求失败时整个逻辑会卡住

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