从网页抓取数据(1024程序员日搬运一篇：使用XMLHttpRequest和Fetch如何处理请求！)

　　从网页抓取数据(1024程序员日搬运一篇：使用XMLHttpRequest和Fetch如何处理请求！)

　　1024程序员日，我拎着一块之前钻进金发的文章。可以看成是我前端学习路上的一个时间节点——大致结束了基础知识的学习，开始学习实际项目开发的内容~

　　本文的demo源码和具体资源位于github仓库中的js-demos-infancy前端知识库，记录了一份前端初学者的学习日记&点点滴滴的学习路径（实践demo‍，重要知识点）

　　欢迎大家贡献更多“前端er必知知识”/分享更有意义的demo️！（请给这个年轻的小仓库更多内容）

　　学习 Ajax/Fetch 请求和承诺

　　适合准备学习Ajax，对入口请求的发送和接收（为了简化流程，专注于客户端的编码，我们使用. txt 文件作为数据库，无需考虑服务端编码）

　　.html的运行方式分为

　　服务器在本地 Web 服务器上运行

　　这两个内容我们会慢慢完善的~

　　本DEMO整理自MDN官方文档教程

　　那么接下来，让我们看看如何使用 XMLHttpRequest 和 Fetch 来处理请求！

　　从本地文件运行示例

　　由于安全限制，从本地文件运行实例时，部分浏览器不会运行XHR请求~

　　稍后我们需要通过在本地服务器上运行来测试这个例子

　　我们将从几个不同的文本文件中请求数据并使用它们来填充内容区域。

　　这一系列文件将作为我们的假数据库；在实际应用中，我们更有可能使用服务器端语言（例如 PHP、Python 或 Node）从数据库中请求我们的数据。但是，在这种情况下，我们希望保持简单并专注于客户端部分。

　　可以点进MDN看看~

　　在这个例子中，我们将通过 XHR 从下拉菜单中选择一首诗并加载另一首诗

　　完成基本的 Ajax 请求

　　请注意，如果您仅从本地文件运行示例，某些浏览器（包括 Chrome）将不会运行 XHR 请求。这是因为安全限制~为了解决这个问题，我们需要通过在本地web服务器上运行来测试这个例子

　　由于安全限制，XD实际上是无效的。

　　

　　 // 注意 如果只是从本地文件运行示例，

// 一些浏览器(包括Chrome)将不会运行XHR请求。这是因为安全限制~

// 为了解决这个问题，我们需要通过在本地web服务器上运行它来测试这个示例

const verseChoose = document.querySelector('select');

const poemDisplay = document.querySelector('pre');

​

verseChoose.onChange = function(){

const verse = verseChoose.value;// 获取到的诗 赋给verse变量

updateDisplay(verse);// 获取到的诗传给函数 目的:将Verse 1 转换为verse.txt

}

​

​

function updateDisplay(verse){

// 将Verse 1 转换为verse.txt

verse = verse.replace(" ", "");// 将空格去掉（Web服务器的文件名无空格）

verse = verse.toLowerCase();

let url = verse + '.txt';

// 开始创建XHR请求 —— AJAX操作中的核心

let request = new XMLHttpRequest();

// 指定 用于从网站请求资源的HTTP请求方法 这里是GET方法

// 指定 想请求资源的网站的URL

request.open('GET', url);

// 作为 text. 这并不是绝对必要的 — XHR默认返回文本

// 如果你想在以后获取其他类型的数据，养成这样的习惯是一个好习惯

request.responseType = 'text';

// 当onload 事件触发时（当响应已经返回时）这个事件会被运行

request.onload = function(){

poemDisplay.textContent = request.response;

}

request.send();

}

​

// 首次加载也要显示

updateDisplay('Verse 1');

verseChoose.value = 'Verse 1';

　　在服务器端运行示例

　　此外，我们使用 Fetch API 来取代 XHR——它最近在浏览器中引入，这使得异步 HTTP 请求更容易在 JavaScript 中实现，无论是对于开发人员还是其他构建在 Fetch 之上的 API。

　　 // 注意 如果只是从本地文件运行示例，

// 一些浏览器(包括Chrome)将不会运行XHR请求。这是因为安全限制~

// 为了解决这个问题，我们需要通过在本地web服务器上运行它来测试这个示例

const verseChoose = document.querySelector('select');

const poemDisplay = document.querySelector('pre');

​

verseChoose.onchange = function(){

const verse = verseChoose.value;// 获取到的诗 赋给verse变量

updateDisplay(verse);// 获取到的诗传给函数

}

​

​

function updateDisplay(verse){

// 将Verse 1 转换为verse.txt

verse = verse.replace(" ", "");// 将空格去掉（Web服务器的文件名无空格）

verse = verse.toLowerCase();

let url = verse + '.txt';

// 开始创建XHR请求 —— AJAX操作中的核心

// let request = new XMLHttpRequest();

// request.open('GET', url);

// request.responseType = 'text';

// request.onload = function(){

// poemDisplay.textContent = request.response;

// }

// request.send();

​

fetch(url).then(function(response){

response.text().then(function(text){

poemDisplay.textContent = text;

});

});

}

​

// 首次加载也要显示

updateDisplay('Verse 1');

verseChoose.value = 'Verse 1';

​

　　这里我们使用 node.js 搭建一个本地的 HTTP 服务器服务

　　 npm install http-server -g;// 全局安装http-server

// 跳转到网页对应的目录，打开命令行窗口 输入——

http-server

　　之后就可以在服务端运行html文件进行异步操作了！地址格式类似于以下-

　　

　　效果如下

　　

　　总结与经验

　　我比较熟悉“从服务器获取数据”的形式~

　　学习了基本的 Ajax 请求

　　 let request = new XMLHttpRequest();

request.open('GET', url);

request.responseType = 'text';

request.onload = function{

// 请求对应的响应返回时，这个事件会被运行

poemDisplay.textContent = request.response;

}

request.send();

　　学习了 Fetch API

　　首先我们要清楚替换XHR Fetch代码的每一步的含义

　　 fetch(url).then(function(response){

// fetch得到url，返回一个promise，promise解析服务器发挥的响应

// 利用promise.then()运行后续代码，这个步骤是一环套一环的！

})

　　 fetch(url).then(function(response){

response.text().then(function(text){

// 将响应response以text的格式返回，与上面一样，也返回了一个promise

// 利用promise.then(func)来完成接下来的操作

// 我们定义了一个函数来接收text() promise解析的文本

})

})

　　 fetch(url).then(function(response){

response.text().then(function(text){

poemDisplay.textContent = text;

})

})

　　难怪很多人说Fetch更好！这样写Quesi就方便多了！

　　接下来看看Promise

　　让我们再看看 Promise

　　大多数现代 JavaScript API 都基于 promise

　　还是用上面的例子来理解promise

　　 fetch(url).then(function(response){

response.text().then(function(text){

poemDisplay.textContent = text;

})

})

　　以上内容是一个promises函数

　　让我们分解一下 ES6 中提出的函数

　　实际上，传递给 then() 的代码是一段不会立即执行的代码——但会在返回响应时执行该代码。（异步编程的思想）

　　上面的代码等价于下面的代码（将promise保存在一个变量中）

　　 let myFetch = fetch(url);

​

myFetch.then(function(response){

response.text().then(function(text){

poemDisplay.textContent = text;

})

})

　　 fetch(url).then(function(dogBiscuits) {

dogBiscuits.text().then(function(text) {

poemDisplay.textContent = text;

});

});

　　当然~将参数称为描述其内容的名称更有意义。

　　 function(response) {

response.text().then(function(text) {

poemDisplay.textContent = text;

});

}

　　上面解析了很多Promise的内容，那么厉害在哪里呢？

　　简单来说，我们可以直接将promise块（.then()块，但还有其他类型）链接到另一个块的末尾，并将每个块的结果沿链传递给下一个块。强大的！

　　相比于大量回调造成的“连续向右”回调地狱，promise块会向下延伸，这就很明显了~

　　让我们回顾一下这个简单的 Promises 示例。

　　 // 01 本例写法

fetch(url).then(function(response){

response.text().then(function(text){

poemDisplay.textContent = text;

})

})

// 02 很多开发者喜欢下面的样式

fetch(url).then(function(response){

return response.text();

}).then(function(text){

poemDisplay.textContent = text;

})

　　02的写法更扁平，可读性大大提高对吧？

　　那么我们应该选择哪种方法呢？Ajax VS 获取

　　所以如果要保证老版本的兼容性，数据请求还是要使用XHR

　　Fetch 显然更好，不是吗？

　　超过