Question

我正在尝试创建一个函数，该函数使用JavaScript返回txt文件的内容，以便可以将其存储在变量中，并在以后使用。到目前为止，我已经尝试过：

var text;

function getText(url) {
  fetch(url)
    .then( r => r.text() )
}

getText("foo.txt").then(r => text);

但这表示文本未定义。

我也尝试过：

function getText(url) {
  var client = new XMLHttpRequest();
  client.open('GET', url);
  client.onreadystatechange = function() {
    text = client.responseText;
    return text;
  }
  client.send();
}

这仍然让我不确定。如果我将console.log()放在readystatechange内，它会给出正确的文本，但会重复两次。

我也尝试过：

function getText(url) {
    jQuery.get(url, function(data) {
        console.log(data);
    });
    return data;
}

但是这给了我一个错误，说jquery is not defined，而且我似乎无法使jQuery正常工作，因此最好在没有jquery的情况下可以做到这一点？

Answer 1

使用fetch API的第一种方法是正确返回undefined，因为您没有返回thenable。请注意，返回值本身是一个承诺而不是数据，您需要调用then()来记录数据。当前无法将返回的数据直接分配给变量。

对于第二个示例，如果将console.log放置在client.onreadystatechange中，则它将记录两次响应，因为对于单个请求多次调用该响应。仅当响应代码为200 OK并且状态为4时，才应记录响应。

function getText(url) {
     return fetch(url) //notice the return, it is returning a thenable
            .then(text => text.text())
}
getText("https://jsonplaceholder.typicode.com/todos/1").then(d => console.log(d));

//Using Async/Await

async function getTextAsync(url) {
     let text = await fetch(url)
     let data = await text.text()
     return data;
}
getTextAsync("https://jsonplaceholder.typicode.com/todos/1").then(d => console.log(d));

//Using XMLHttpRequest

function getTextXml(url) {
  var client = new XMLHttpRequest();
  client.open('GET', url);
  client.onreadystatechange = function() {
  if (client.readyState == 4 && client.status == 200) //notice the response code and the state code
   {
    if (client.responseText)
     {
       console.log(client.responseText);
     }
    }
   }
  client.send();
}
getTextXml("https://jsonplaceholder.typicode.com/todos/1");

Answer 2

console.log（）只是将其打印到控制台，是否有将其存储在变量中？

由于fetch是一个异步过程，因此您永远无法像这样为text分配值。目前，现代浏览器提供的最接近的功能是使用async / await。

// Mock `fetch` to return a value after 1.5s 
function getText(url) {
  return new Promise(resolve => {
    setTimeout(() => resolve('Hallo'), 1500);
  });
}

// Unfortnately `await` has to be used in conjunction
// with async so we have to use an immediately-invoked 
// async function expression here
(async () => {

  // `await` for the promise to resolve
  const text = await getText("foo.txt");
  console.log(text);
})();

<p>Please wait 1.5s</p>

the answers to this Stackoverflow question中有很多信息（需要一些时间来提炼）。

返回文本文件JavaScript内容的函数

2 个答案: