正文

JavaScript 中的 Promises/Fetch：如何从文本文件中提取文本

 2023-02-27  232

关键词：

【中文标题】JavaScript 中的 Promises/Fetch：如何从文本文件中提取文本【英文标题】：Promises/Fetch in JavaScript: how to extract text from text file 【发布时间】：2018-10-28 07:24:57 【问题描述】：

我正在用 JavaScript 编写一个小程序。基本上，我想使用 Promise 和 fetch 从两个文本文件中提取文本。但是，我不知道如何从文件中获取实际文本。这是我当前的代码。

示例.txt

this is
a sample
text file.

sample2.txt

this is
the second
sample file.

index.js

function getSampleText() 

  Promise.all([
  fetch('sample.txt'),
  fetch('sample2.txt')
  ]).then(allResp => 
    let sampleResp = allResp[0];
    let sample2Resp = allResp[1];
    console.log(sampleResp);
    console.log(sample2Resp);
  )

这是 Promises...我如何从中获取文本？

【问题讨论】：

【参考方案1】：

Fetch 不会返回响应文本的承诺 - 它会返回在收到标头后可用的 Response 对象的承诺。

这样你就可以做一些很酷的事情，比如：

根据标头确定您希望如何读取响应正文。逐步流式传输响应等。

如果您想要响应的文本 - 您可以通过 .text() Response 对象获得承诺：

Promise.all([
  fetch('sample.txt').then(x => x.text()),
  fetch('sample2.txt').then(x => x.text())
]).then(([sampleResp, sample2Resp]) => 
  console.log(sampleResp);
  console.log(sample2Resp);
);

【讨论】：

一定要把catch扔进去:)。【参考方案2】：

使用异步/等待

async function getSampleText() 
  console.log( (await fetch('sample.txt')).text() );
  console.log( (await fetch('sample2.txt')).text() );

【讨论】：

这不会并行获取它们。 @JulienD 是的 - 但很简单

Javascript 中的 + [] [重复]

】Javascript中的+[][重复]【英文标题】：+[]inJavascript[duplicate]Javascript中的+[][重复]【发布时间】：2012-08-1004:02:42【问题描述】：可能重复：WhatistheexplanationforthesebizarreJavaScriptbehavioursmentionedinthe\'Wat\'talkforCodeMash2012?当我输入时+[]在Goog... 查看详情

Eloquent Javascript 中的 Javascript 函数

】EloquentJavascript中的Javascript函数【英文标题】：JavascriptfunctioninEloquentJavascript【发布时间】：2014-01-2015:49:43【问题描述】：greaterThanTen(9)如何成为返回函数中的y变量？我的意思是参数(9)如何成为返回函数参数中的y？自从greaterThan... 查看详情

javascript数组中的javascript(代码片段)

查看详情

javascript中的dom

通过HTMLDOM(文档对象模型)，可访问JavaScriptHTML文档的所有元素。当网页被加载时，浏览器会创建页面的文档对象模型（DocumentObjectModel）。通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML。JavaScript能够改变页面... 查看详情

javascript检测javascript中的空值(代码片段)

查看详情

javascript在javascript中的foreach(代码片段)

查看详情

javascript中的事件对象

JavaScript中的事件对象　JavaScript中的事件对象是非常重要的，恐怕是我们在项目中使用的最多的了。在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含这所有与事件有关的信息。下面将会讲到DOM中的事件... 查看详情

Javascript中的节点是啥？

】Javascript中的节点是啥？【英文标题】：WhatisanodeinJavascript?Javascript中的节点是什么？【发布时间】：2014-09-1810:09:35【问题描述】：我想知道JavaScript中的节点到底是什么？在函数中：element.nodeTyperow.parentNode.removeChild(row);【问题讨... 查看详情

jquery中的$(this)和javascript中的this

　　this是JavaScript中的关键字。 $(this)可以认为是用jQuery包装过JavaScript中的this，包装后$(this)就会继承jQuery的方法。本质就是JavaScript与jQuery对象的转换$(‘a‘).click(function(){//这里的this指向当前点击的DOM节点，也就是a。可以调... 查看详情

JavaScript 中的 + 是啥？ [复制]

】JavaScript中的+是啥？[复制]【英文标题】：Whatis+inJavaScript?[duplicate]JavaScript中的+是什么？[复制]【发布时间】：2013-04-0610:52:33【问题描述】：第一部分：因为当您添加两个数组时，一切都按预期工作：[]+[]//output:\'\'添加一个数组... 查看详情

javascript变量作为javascript中的函数(代码片段)

查看详情

javascript简单的javascript中的cookie(代码片段)

查看详情

使用 javascript 确定 javascript 中的堆栈深度

】使用javascript确定javascript中的堆栈深度【英文标题】：determinestackdepthinjavascriptusingjavascript【发布时间】：2012-01-1314:23:12【问题描述】：有没有办法通过使用javascript本身来确定在javascript中执行的所有函数的堆栈深度？我认为这... 查看详情

为啥正文中的 javascript 函数优先于头部中的函数？

】为啥正文中的javascript函数优先于头部中的函数？【英文标题】：Whyjavascriptfunctioninthebodytakesprecedenceoverfunctioninthehead?为什么正文中的javascript函数优先于头部中的函数？【发布时间】：2018-06-0304:49:47【问题描述】：我试图了解jav... 查看详情

javascript中的函数介绍

...输入参数（在函数体中使用），并在执行后返回值。　　JavaScript函数也具有这些特性，但它们不仅仅是常规函数。JavaScript函数是对象。你可以查看我曾经写的关于JavaScript对象的文章，里面我提到几乎JavaScript中的所有一切都是... 查看详情

javascript中的this陷阱的最全收集

JavaScript来自一门健全的语言，所以你可能觉得JavaScript中的this和其他面向对象的语言如java的this一样，是指存储在实例属性中的值。事实并非如此，在JavaScript中，最好把this当成哈利波特中的博格特的背包，有着深不可测的魔力... 查看详情

JavaScript 中的构造究竟是啥？

】JavaScript中的构造究竟是啥？【英文标题】：WhatpreciselyisaconstructinJavaScript?JavaScript中的构造究竟是什么？【发布时间】：2012-09-0305:30:28【问题描述】：当我学习JavaScript时，我一直在浏览网络，并看到许多关于Javascript中构造的引... 查看详情

javascript语言中的this

JavaScript语言中的this由于其运行期绑定的特性，JavaScript中的this含义要丰富得多，它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。JavaScript中函数的调用有以下几种方式：作为对象方法调用，作为函数... 查看详情