如何解决EventSource异步获取数据无法从函数返回的问题？

这个问题的核心在于EventSource的异步特性——你的fetchData函数会在SSE连接建立后立刻执行完毕，而message事件是在之后收到服务器数据时才触发的，你写在事件回调里的return e根本不会影响函数的返回值，所以自然得到undefined。

下面给你几种可行的解决方案，根据你的需求选择：

方案1：使用回调函数（传统异步处理方式） #

把处理数据的逻辑作为回调参数传入函数，当收到SSE消息时调用这个回调来传递数据：

function fetchData(date, lang, callback) {
  // 用模板字符串拼接URL更清晰，避免转义问题
  const source = new EventSource(`URL.php?sse=y&lang=${lang}&date=${date}`);

  // 收到消息时调用回调传递数据
  source.addEventListener('message', function(e) {
    callback(null, e);
    // 如果只需要获取一次数据，记得关闭连接
    source.close();
  }, false);

  // 处理错误情况，把错误传给回调
  source.addEventListener('error', function(error) {
    callback(error, null);
    source.close();
  });
}

// 使用示例
fetchData('2024-05-20', 'en', function(error, data) {
  if (error) {
    console.error('获取数据出错:', error);
    return;
  }
  console.log('收到的数据:', data);
  // 在这里处理你的数据，而不是试图返回它
});

方案2：使用Promise（推荐，支持async/await） #

把整个SSE操作包装成Promise，这样可以用async/await让代码看起来更像同步逻辑，也更符合现代JS的异步处理习惯：

function fetchData(date, lang) {
  return new Promise((resolve, reject) => {
    const source = new EventSource(`URL.php?sse=y&lang=${lang}&date=${date}`);

    source.addEventListener('message', function(e) {
      resolve(e);
      source.close(); // 单次数据获取后关闭连接
    }, false);

    source.addEventListener('error', function(error) {
      reject(error);
      source.close();
    });
  });
}

// 使用示例（需要在async函数中调用）
async function getData() {
  try {
    const data = await fetchData('2024-05-20', 'en');
    console.log('收到的数据:', data);
    // 这里可以直接使用data，也可以把它return出去供其他地方使用
    return data;
  } catch (error) {
    console.error('获取数据失败:', error);
  }
}

// 调用getData，后续可以用then处理返回的数据
getData().then(processedData => {
  // 在这里使用从SSE获取到的数据
}).catch(err => console.error(err));

方案3：处理持续的SSE数据流 #

如果你的SSE是持续推送数据（比如实时更新的消息流），而不是单次获取，那你没法返回一个单一的值，而是可以返回EventSource实例，让调用者自己监听message事件来持续处理数据：

function fetchDataStream(date, lang) {
  const source = new EventSource(`URL.php?sse=y&lang=${lang}&date=${date}`);
  return source;
}

// 使用示例
const sseStream = fetchDataStream('2024-05-20', 'en');
sseStream.addEventListener('message', e => {
  console.log('收到新的数据流:', e);
  // 持续处理每个推送过来的消息
});

// 当不需要数据流时，记得关闭连接
// sseStream.close();

总结一下：因为SSE是异步的，你不能像同步函数那样直接返回结果，必须用异步的处理方式——回调、Promise或者直接返回EventSource让调用者监听事件。选择哪种取决于你是需要单次数据还是持续的数据流。

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