ES6(promise)_解决回调嵌套简单应用
一、前言
这个小案例是在node平台上应用的所以需要保证你的电脑：
1、安装和配置node.js环境
2、需要用node.js来开启一个http-server: 开启方法：https://blog.csdn.net/kaixinhlz/article/details/67046964
3、需要模拟数据接口 模拟方法：https://www.cnblogs.com/blackgan/p/7435228.html
二、主要内容
1、项目说明：
(1)项目结构
（2）代码如下
data.json中有user 和jobs两张表 uesr表里面保存了job在jobs表中的对应id
data.json如下：
{
"users": [{
"id":1,
"username": "admin",
"age": 18,
"job": 2
},
{
"id": 2,
"username": "admin2",
"age": 18,
"job": 4
}
,
{
"id": 3,
"username": "admin3",
"age": 18,
"job": 2
}
,
{
"id": 4,
"username": "admin4",
"age": 18,
"job": 2
}
],
"jobs": [
{
"id": 1,
"name": "学生"
},
{
"id": 2,
"name": "老师"
},
{
"id": 3,
"name": "司机"
},
{
"id": 4,
"name": "画家"
},
{
"id": 5,
"name": "演员"
},
{
"id": 6,
"name": "电竞人"
}
]
}
data.json
index.html（回调嵌套的方式同时获取两个数据接口的数据）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="" id="user-form"> </form>
<script type="text/template" id="tpl"> <div>
<label for="">姓名</label>
<input type="" name="" value="{{ user.username }}">
</div> <div>
<label for="">年龄</label>
<input type="text" name="" value="{{ user.age }}">
</div> <div>
<label for="">职业</label>
<select name="" id="">
{{ each jobs }} {{ if user.job === $value.id }}
<option value="{{ $value.id }}" selected>{{ $value.name }}</option>
{{else}}
<option value="{{ $value.id }}">{{ $value.name }}</option>
{{/if}} {{/each}}
<option>学生</option>
<option>老师</option>
<option>司机</option>
<option>画家</option>
<option>演员</option>
<option>电竞人</option>
</select>
</div> </script>
<script src="node_modules/art-template/lib/template-web.js"></script>
<script> get('http://localhost:3000/users/1', function (usersdata) {
get('http://localhost:3000/jobs', function (jobsdata) { console.log(usersdata, jobsdata) var htmlStr = template('tpl', {
user: JSON.parse(usersdata),
jobs: JSON.parse(jobsdata)
}) document.querySelector('#user-form').innerHTML = htmlStr })
}) function get(url, callback) {
var oReq = new XMLHttpRequest() oReq.onload = function () {
callback(oReq.responseText);
} oReq.open("get", url, true)
oReq.send()
} get('data.json', function (data) {
console.log(data)
})
</script>
</body>
</html>
index.html
index.html(Jquery中的ajax就支持了promise)
2、具体实现
第一步：制作数据接口
（1）在 项目中安装json-server
//一：安装json-server
npm install -g json-serv
（2）先在文件中创建一个data.json文件，文件的内容如上所示，
（3）运行 data.json是你上面创建的文件
json-server --watch data.json
（4）运行成功会返回给我们如下地址，复制地址到浏览器中打开，会出现两条数据接口
如下：
第二步：将上面请求到的接口渲染到页面上
（1）先安装http-server来帮助我们快速开启一个服务 ，重新再开一个cmd命令框，不要将上面开启的数据接口关闭了
//安装
npm install http-server //开启
hs -o
（2）访问这个地址
第三步： 要将数据渲染到页面上 必须请求数据，处理响应，再进行页面渲染
方式一：用原生ajax方式请求
//这里在请求user表
get('http://localhost:3000/users/4', function (err, userdata){
console.log(userdata)
//请求user表的同时也请求job表
get(' http://localhost:3000/jobs', function (err, jobsdata) {
//模板
var htmlStr = template('tpl', {
user: JSON.parse(userdata),
jobs: JSON.parse(jobsdata)
}) document.querySelector.innerHTML = htmlStr
})
}) //原生ajax实现
function get(url, callback){ var oReq = new XMLHttpRequest(); oReq.onload=function() { console.log(oReq.responseText)
} oReq.open("get", url, true);
oReq.send();
}
方式二：Jquery中的ajax就已经支持promise
var data = {}
$.get('http://localhost:3000/users/4')
.then(function (user) {
data.user = JSON.parse(user)
return $.get('http://localhost:3000/jobs')//// 当前函数中 return 的结果就可以在后面的 then 中 function 接收到,这里的请求结果就可以在下面接收，这里return 的是什么，接收到的就是什么
})
.then(function (jobs) {
data.job = jobs //接收结果
var htmlStr = template('tpl', data)
document.querySelector('#user-form').innerHTML = htmlStr
})
方式三：封装上面的get方法，让他也支持promise
//接受请求到的数据
var data = {}
Pget('http://127.0.0.1:3000/users/4')
.then( function(user) {
data.user = JSON.parse(user)
return pGet('http://127.0.0.1:3000/jobs')
})
.then(function (jobs) {
data.user = JSON.parse(user) var htmlStr = template('tpl', data);
document.querySelector('#user-form').innerHTML = htmlStr
}) //封装promise
function Pget(url) { return new Promise(resolve, reject) {
var oReq = new XMLHttpRequest()
//当请求成功时调用resolve函数
oReq.onload = function () {
resolve(oReq.responseText);
}
//请求失败时调用reject
oReq.onerror = function(err){
reject(err)
} oReq.open("get", url, true)
oReq.send()
} }
查看结果：我们请求的地址是：http://127.0.0.1:3000/users/4 也就是user表中的第四条，里面的job:=2 ,job=2对应的职业应该是老师，下面渲染的结果正确
三、总结
ES6(promise)_解决回调嵌套简单应用的更多相关文章
- ES6(promise)_解决回调地狱初体验
一.前言 通过这个例子对promise解决回调地狱问题有一个初步理解. 二.主要内容 1.回调地狱:如下图所示,一个回调函数里面嵌套一个回调函数,这样的代码可读性较低也比较恶心 2.下面用一个简单的例 ...
- 【JavaScript】 使用Async 和 Promise 完美解决回调地狱
很久以前就学习过Async和Promise,但总是一知半解的. 今天在写NodeJS的时候,发现好多第三方库使用回调,这样在实际操作中会出现多重回调,这就是传说中的JS回调地狱. 举个例子 有一个方法 ...
- promise对象解决回调地狱
先放一张图片感受一下回调地狱 看起来是真的很让人头痛的东西 而现在我这里使用promise对象来解决回调地狱 采用链式的 then,可以指定一组按照次序调用的回调函数. 这时,前一个 then 里的一 ...
- Promise如何解决回调地狱
为什么要有promise:解决(回调地狱)的问题 ### 回调地狱: ```js //跟以前的if条件地狱很像 // if(){ // if(){ // if(){ // } // } //} $.g ...
- 使用ES6的Promise完美解决回调地狱
相信经常使用ajax的前端小伙伴,都会遇到这样的困境:一个接口的参数会需要使用另一个接口获取. 年轻的前端可能会用同步去解决(笑~),因为我也这么干过,但是极度影响性能和用户体验. 正常的前端会把接口 ...
- 回调地狱以及用promise怎么解决回调地狱
哈哈哈,我又又又回来了,不好意思,最近枸杞喝的比较到位,精力比较旺盛. 现在我们来聊一聊啥是回调地狱,注意是回调地狱啊 不是RB人民最爱拍的那啥地狱啊,来吧,上车吧少年,这是去幼儿园的车 都让开, ...
- 一篇文章彻底搞懂es6 Promise
前言 Promise,用于解决回调地狱带来的问题,将异步操作以同步的操作编程表达出来,避免了层层嵌套的回调函数. 既然是用来解决回调地狱的问题,那首先来看下什么是回调地狱 var sayhello = ...
- JavaScript ES7 中使用 async/await 解决回调函数嵌套问题
原文链接:http://aisk.me/using-async-await-to-avoid-callback-hell/ JavaScript 中最蛋疼的事情莫过于回调函数嵌套问题.以往在浏览器中, ...
- Promise,async/await解决回调地狱
先说一下async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行. 写一个async 函数 as ...
随机推荐
- javascript帧动画
前面的话 帧动画就是在“连续的关键帧”中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成的动画.由于是一帧一帧的画,所以帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容. ...
- Python读取excel中的图片
作为Java程序员,Java自然是最主要的编程语言.但是Java适合完成大型项目,对于平时工作中小的工作任务,需要快速完成,易于修改和调试,使用Java显得很繁琐,需要进行类的设计,打成jar包,出现 ...
- Java拦截器
拦截器,主要用于拦截前端请求,常用于登录检查. 下面是演示使用拦截器拦截未登录的用户访问需要登录的模块情景,使用配置方式实现和注解方式实现代码: 配置方式: 1.web.xml中配置监听器,对于所有的 ...
- Linux系统下手把手完成无人值守安装服务
刚入职的运维新手经常会被要求去做一些安装操作系统的工作,如果按照用镜像光盘安装操作系统,效率会相当低下.那么如何提升效率,搭建出一套可以批量安装Linux系统的无人值守的安装系统? PXE+TFTP+ ...
- 向继电器发送socket请求（python+java）
近日,有一需求,向连接在内网的继电器发送socket请求,加以控制.原本并不复杂,只是io流/socket转换的问题,实操中却出现python代码没问题,java代码执行无响应的问题,问题很好定位:没 ...
- 微服务配合docker使用
1.docker 安装 rabbitmq 启动脚本: docker run -d --name rabbitmq --publish : \ --publish : --publish : --pub ...
- BZOJ2658 ZJOI2012 小蓝的好友（treap）
显然转化为求不包含关键点的矩形个数.考虑暴力,枚举矩形下边界,求出该行每个位置对应的最低障碍点高度,对其建笛卡尔树,答案即为Σhi*(slson+1)*(srson+1),即考虑跨过该位置的矩形个数. ...
- Matplotlib学习---用matplotlib和sklearn画拟合线（line of best fit）
在机器学习中,经常要用scikit-learn里面的线性回归模型来对数据进行拟合,进而找到数据的规律,从而达到预测的目的.用图像展示数据及其拟合线可以非常直观地看出拟合线与数据的匹配程度,同时也可用于 ...
- nginx配置80端口访问8080+项目名地址
tomcat访问项目,一般是 ip + 端口 + 项目名 nginx 配置 location / {} ,一般只能跳转到 ip + 端口,如果想要直接访问项目,就需要修改tomcat的配置了 如何保证 ...
- IT人员必须掌握的10项软技能
现代企业的IT部门员工在具备技术能力的同时,还需要掌握一些软技能.现在来看这些软技能其实并不是什么新鲜事物,只是IT人员所需的这些软技能的范围与数量正在不断增加着. IT人员需要具备哪些技术能力,要取 ...