fetch API 可以获取文件的文本吗？ [复制]答案

【问题标题】：fetch API can get the text of a file? [duplicate]fetch API 可以获取文件的文本吗？ [复制]
【发布时间】：2021-05-04 17:54:52
【问题描述】：

我有两个文件。

文件 1：

<!DOCTYPE html>
<html>
  <body>
    <button class="add">Click Here!</button>
    <script>
      let a;
      async function test(file) {
        let response = await fetch(file);
        return response.text();
      }
      const bu = document.querySelector(".add");
      bu.addEventListener("click", async () => {
        a = test("./prova.html");
        console.log(a);
      });
    </script>
  </body>
</html>

文件 2：

<h1>Hello, World!</h1>

当我单击按钮时，我想将响应的文本正文从 fetch 传递到 var a。但我得到的是

index.html:16 Promise {<pending>}

【问题讨论】：

response.text() 总是返回一个promise，可以根据请求的成功与否来实现或者挂起……你需要获取fetch()请求的数据，这不是与其中 responseText 相同的 XHR 请求相同，请尝试使用 response.data

标签： javascript api fetch

【解决方案1】：

异步函数返回一个 Promise。 Promise 对象表示异步操作的最终完成（或失败）及其结果值。如果要将其结果（检索后的实际文本）设置为变量a，可以使用test("./prova.html"); 的结果await operator 到await。

bu.addEventListener("click", async () => {
   a = await test("./prova.html");
   console.log(a);
});

【讨论】：

【解决方案2】：

每个获取请求都需要一个 Promise，你应该使用

  async function test(file) {
    let response = await fetch(file);
    .then(res => ( this.text = res ))
  }

【讨论】：

当我运行你的 sn-p 时，这是控制台日志上的输出：未捕获（承诺）类型错误：无法设置未定义的属性“文本”
你想达到什么目的？我愿意重新制作你的代码来做到这一点。
@LorenzoMonaco 将this.text 替换为对要替换的文本元素的引用。
@Flash 我想将文件 2 的内容传递给 var a。所以 var a = '
你好，世界！
'
@你不能使用a，你对响应所做的一切都必须在传递给then的函数中完成，或者你可以在该回调中调用另一个函数，并传递@987654326 @.

你好，世界！