如何在JavaScript中返回通过Promise获取的文件内容？

这是异步JavaScript里非常典型的问题，我来帮你拆解清楚～

为什么你的函数返回undefined？ #

你的getEventFileFromServer函数里，虽然调用了fetch并通过.then处理了结果，但整个函数没有返回任何值——你只是在内部的.then回调里返回了contentOfEventFile，但这个返回值并没有传递到函数外部。加上fetch是异步操作，函数会在异步请求完成前就执行完毕，所以默认返回undefined。

怎么修改才能返回内容供其他函数使用？ #

你需要让函数返回整个Promise链，这样外部就能通过Promise的机制获取到异步操作的结果。

修改后的函数：

function getEventFileFromServer () { 
  // 关键：返回fetch创建的Promise链
  return fetch('event-file.txt')
    .then(eventFile => eventFile.text())
    .then(contentOfEventFile => { 
      return contentOfEventFile; 
    }); 
}

如何在其他函数中使用这个返回值？ #

因为函数返回的是一个Promise，你有两种常用的方式获取结果：

方式1：使用.then链式调用

// 调用函数并处理结果
getEventFileFromServer().then(content => {
  console.log(content); // 这里能拿到文件内容
  // 直接把内容传给其他函数使用
  yourOtherFunction(content);
});

方式2：使用async/await（更直观的语法）

如果你的执行环境支持ES6+，可以用async/await把异步代码写成同步风格的样子，注意要在async标记的函数内部使用await：

async function processEventFile() {
  try {
    const content = await getEventFileFromServer();
    console.log(content);
    yourOtherFunction(content);
  } catch (error) {
    // 别忘了处理请求失败的情况
    console.error('获取文件失败：', error);
  }
}

processEventFile();

补充说明 #

你之前把return换成console.log能看到内容，是因为那个console.log是在Promise的回调里执行的——当异步请求成功完成后，才会触发这个回调并打印内容。而函数本身早就执行完返回undefined了，所以外部的console.log(getEventFileFromServer())只能拿到undefined。

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