利用Ajax & Fetch + promise 从服务器抓取数据

1024程序员日搬运一篇之前在掘金发的文章，算是自己前端学习路上一个时间节点吧——大致结束了基础知识的学习 & 开始学习真实项目开发的内容~

本文demo源代码与具体资源位于 github仓库-正在起步阶段的前端知识库中的JS-demos，其中记录了一名前端初学者的学习日记🤔&学习之路点点滴滴的记录（练手demo🧑‍💻，重要知识点🧐）

欢迎大家来贡献更多“前端er必会知识点”🧑‍🎓/分享更多有意义的demo❤️！（请给这个年幼的小仓库更丰富的内容吧🥺🥺🥺）

学习Ajax/Fetch请求&Promise

适合准备学习Ajax，对promise有一定了解（没有也可以啦~）的小伙伴用于入门请求的发送&接收（为了简化过程，聚焦于客户端的编码，我们使用.txt文件作为数据库，不用考虑服务端的编码）

.html的运行方式分为

• local 从本地文件运行示例（浏览器不会运行XHR请求，因为安全限制）

  • They feature asynchronous requests（当代码有异步请求的特性时再从本地打开）浏览器不会运行异步请求

• server 在本地web服务器上运行

  • 为了解决异步请求，我们需要通过在本地web服务器上运行ajax-billSu.html来测试异步请求的发送成功与否

我们将递进地完成这两块的内容~

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

基本的Ajax请求

那么接下来，让我们看看使用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()