如何在 JavaScript 中返回使用 promise 获取的文件？ [复制]答案

【问题标题】：How to return a file fetched with promise in JavaScript? [duplicate]如何在 JavaScript 中返回使用 promise 获取的文件？ [复制]
【发布时间】：2021-11-13 13:53:43
【问题描述】：

我试过的是这样的：

function getEventFileFromServer () {
  const fetchedPromise = fetch('event-file.txt');
  fetchedPromise.then(eventFile => eventFile.text())
  .then(contentOfEventFile => {
    return contentOfEventFile;
  });
}

console.log(getEventFileFromServer()) // logs 'undefined'

如果我使用console.log(contentOfEventFile) 而不是return contentOfEventFile，我可以在控制台中看到文件的内容，但我如何才能将其返回以在不同的功能中使用它？

【问题讨论】：

标签： javascript promise return fetch-api

【解决方案1】：

问题在于获取文件是一个异步事件，并且在您的承诺解决之前返回的函数未定义。像这样考虑它 -

function getEventFileFromServer () {
  const fetchedPromise = fetch('event-file.txt');
  fetchedPromise.then(eventFile => eventFile.text())
  .then(contentOfEventFile => {
    return contentOfEventFile;
  });
  return undefined;
}

现在，您有几个选择。

1.) 异步/等待

async function getEventFileFromServer () {
  const eventFile = await fetch('event-file.txt');
  const contentOfFile = await eventFile.text();
  return contentOfFile;
}

然后使用async/await 或承诺在任何你想要的地方使用它，即 -

async useFileValue() {
    const data = await getEventFileFromServer();
    console.log(data);
}

2.) 返回承诺本身 -

不要在承诺上使用.then，而是简单地返回承诺，即 -

function getFileEvent() {
     return fetch('event-file.txt');
}

现在使用.then在任何你想要的地方通过promise解析值

function getFileData() {
    getFileEvent().then(eventFile => eventFile.text())
                  .then(contentOfEventFile => {
                      // Do whatever you want with data here
                      console.log(contentOfEventFile);
                  })
}

【讨论】：