Promise相关内容（三）——异步获取服务器数据：promise方式解决回调地狱的问题。通过多个.then使代码可读性更高 实现异步任务的串行执行，保证按顺序发送请求获取数据
2024-06-03 06:45:46
Promise相关内容（三）——异步获取服务器数据：promise方式解决回调地狱的问题。通过多个.then使代码可读性更高 & 实现异步任务的串行执行，保证按顺序发送请求获取数据
第一种形式：常规写法-正常
第一步：新建myapi文件夹
第二步：在文件夹myapi里面新建index.js和pubulic文件夹
第三步：在publice文件夹下新建文件01.html
内容如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div>Promise</div><script type="text/javascript">/*如何获取异步的结果*/function queryData () {let xhr = new XMLHttpRequest()xhr.open('get', 'data')xhr.send(null)xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status === 200) {// 获取服务器响应的结果let ret = xhr.responseTextconsole.log(ret)}}}}queryData()</script>
</body>
</html>
第四步：index.js文件如下:
const express = require('express');
const app = express();// 启动静态资源服务
app.use(express.static('public'))app.get('/data', (req, res) => {let info = {username: 'lisi',age: 12}// res.send('Hello World')res.json(info)
})app.listen(3000, () => {console.log('running...')
})
第五步：在myapi文件夹下，命令行启动服务器
node index.js
第六步：打开页面，控制台验证获取数据——22行和服务器均验证成功
第二种形式：如果返回值形式验证，显示undefined
function queryData () {let xhr = new XMLHttpRequest()xhr.open('get', 'data')xhr.send(null)xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status === 200) {// 获取服务器响应的结果let ret = xhr.responseText// console.log(ret)
+ return ret }}}}
- queryData()
+ let ret = queryData()
+ console.log(ret)
此时打印ret，显示为undefined
第三种形式：返回值形式验证，显示为null
/*如何获取异步的结果*/function queryData () {let xhr = new XMLHttpRequest()xhr.open('get', 'data')xhr.send(null)+ let ret = null// 回调函数（定义——由自己定义，由别人/浏览器调用）xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status === 200) {// 获取服务器响应的结果// let ret = xhr.responseText// console.log(ret)// return retret = xhr.responseText}}}return ret //为null原因：当返回值时，ret此时尚为空}// 异步的结果无法通过返回值的方式获取// 必须使用回调函数的方式获取
+ let ret = queryData()
+ console.log(ret) 拿不到结果，显示为空。打印为显示为null
第四种形式：回调函数的方式获取数据验证，正常显示
单层回调
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div>Promise</div><script type="text/javascript">/*如何获取异步的结果*/function queryData (callback) {let xhr = new XMLHttpRequest()xhr.open('get', 'data')xhr.send(null)xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status === 200) {// 获取服务器响应的结果let ret = xhr.responseTextcallback(ret) }}}}// callback(ret)中的ret传给dataqueryData(function(data) {console.log(data)})</script>
</body>
</html>
打开页面，显示正常（回调函数，获取数据）
**变形写法：**加个路径，显示结果没有变化
注意写法对比，代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div>Promise</div><script type="text/javascript">/*如何获取异步的结果*/
+ function queryData (callback,path) {let xhr = new XMLHttpRequest()
+ xhr.open('get', path)xhr.send(null)xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status === 200) {// 获取服务器响应的结果let ret = xhr.responseTextcallback(ret) }}}}// callback(ret)中的ret传给dataqueryData(function(data) {console.log(data)
+ },'data')</script>
</body>
</html>
打印data，显示结果同上
多层回调，出现回调地狱，影响性能
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div>Promise</div><script type="text/javascript">/*如何获取异步的结果*/function queryData (callback,path) {let xhr = new XMLHttpRequest()xhr.open('get', path)xhr.send(null)xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status === 200) {// 获取服务器响应的结果let ret = xhr.responseTextcallback(ret) }}}}// callback(ret)中的ret传给data// queryData(function(data) {// console.log(data)// },'data')// 回调地狱queryData(function(data) {console.log(data)queryData(function(data) {console.log(data)queryData(function(data) {console.log(data)}, 'data2')}, 'data1')}, 'data')</script>
</body>
</html>
多层回调，出现回调地狱，可读性不高，不推荐
为了解决上述问题（异步获取数据和多层嵌套出现的回调地狱），就诞生了Promise
实现异步任务的串行执行，按顺序执行任务，保证第一个异步任务的结果拿到后，再发请求进行第二个异步任务，依次类推；采用promise方式，不用嵌套，改为横向的水平关系（多个.then），代码的可读性更高，解决回调地狱的问题
单层数据获取
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div>Promise</div><script type="text/javascript">/*如何获取异步的结果*/function queryData (path) {return new Promise(function(resolve, reject) {// 处理异步任务let xhr = new XMLHttpRequest()xhr.open('get', path)xhr.send(null)// 回调函数（由自己定义，由别人调用）xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status === 200) {// 获取服务器响应的结果let ret = xhr.responseTextresolve(ret)}}}})}queryData('data').then(ret => {console.log(ret)})</script>
</body>
</html>
显示结果正常
多层数据时，也正常
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div>Promise</div><script type="text/javascript">/*如何获取异步的结果*/function queryData (path) {return new Promise(function(resolve, reject) {// 处理异步任务let xhr = new XMLHttpRequest()xhr.open('get', path)xhr.send(null)// 回调函数（由自己定义，由别人调用）xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status === 200) {// 获取服务器响应的结果let ret = xhr.responseTextresolve(ret)}}}})}queryData('data').then(ret => {console.log(ret)return queryData('data1')}).then(ret=>{console.log(ret)return queryData('data2')}).then(ret=>{console.log(ret)})</script>
</body>
</html>
显示正常
Promise相关内容（三）——异步获取服务器数据：promise方式解决回调地狱的问题。通过多个.then使代码可读性更高 实现异步任务的串行执行，保证按顺序发送请求获取数据相关推荐
- Promise(解决回调地狱)
Promise() 对象: 存在三种状态: //进行时 pending// 成功 resolve//失败 reject 执行语句: let promise= new Promise((resolve, ...
- js采用ajax发送请求获取数据（实例操作）
来,案例之前,容我分享一下js如何发送请求. 原生js发送请求: let xhr= new XMLHttpRequest(); // methods:GET/POST请求方式等,url:请求地址,tr ...
- 谷粒商城的前端商品发布功能选择分类后没有发送请求获取关联品牌的相关问题解决
问题描述 控制台报错: 我复制的前端vue源码一开始是Pubsub没定义(Pubsub是消息订阅与发布组件),后来我安装了Pubsub. 安装指令 npm install --save pubsub- ...
- 获取服务器路径的方式 【记录】
JSP页面获取服务器路径的方式 1.basePath方式 <% String path = request.getContextPath(); String basePath = request ...
- Linux命令行执行sqlite3命令创建表格，插入数据，获取数据
Linux命令行执行sqlite3命令创建表格,插入数据,获取数据 文章目录 Linux命令行执行sqlite3命令创建表格,插入数据,获取数据 1-进入sqlite3 2-创建数据库 3-创建表 4 ...
- promise实现多个请求并行串行执行
早上查资料,偶然发现这个话题,发现自己并不会,于是乎,下来研究了一下. 想想之前我们用jquery写请求的时候,要实现请求的串行执行,我们可能是这么做的. $.ajax({url: '',data: ...
- promise解决回调地狱（callback hell）
promise解决回调地狱(callback hell) 具体参考 阮一峰,ES6标准入门 在我们需要对一个异步操作进行频繁的调用的时候,且要保证一步操作的顺序,可能会出现 回调地狱(callback ...
- Promise的基础使用与生成器配合Promise解决回调地狱
经过几天对Promise的了解,希望可以帮助到大家. 什么是回调地狱 说起回调地狱 首先想到的是异步 在js中我们经常会大量使用异步回调,常用的ajxa请求 来看下面这段代码: fun ...
- Promise解决回调地狱
一.Promise是什么 Promise 其实是异步编程的一种解决方案.简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,可以从 ...
最新文章
- ArrayList Iterator remove java.lang.UnsupportedOperationException
- 马哥2013年运维视频笔记 day02 Linux系统常识
- android activity view 区别,片段中onCreateView和onViewCreated之间的区别
- JavaScript判断浏览器类型及版本(新增谷歌的Chrome)
- 第三季2：ORTP库的源码分析、RTP发送实验的源码分析
- 详述白盒测试的逻辑覆盖法的判定覆盖及其优缺点
- grid列的值格式化
- 4009-基于邻接表的边的删除（C++，附思路）
- 斯坦福 CS228 概率图模型中文讲义 三、实际应用
- ROS学习笔记4（编译一个ROS Package）
- 权重的叠加(HTML、CSS)
- Python typing —— 类型提示（type hint）
- IT也要健康：帮助你保持健康的几个重要因素
- Java 学习之集合类（Collections）
- java案例代码14-guiJframe简单小案例
- 批量导出Excel图表为图片
- 交换机cad图例_网络交换机cad图
- nexus-3.37.3 报INSTALL4J_JAVA_HOME to point to a suitable JVM
- 激光测距传感器原理与应用介绍
- 如何激活微信里沉睡的客户？