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 ...
随机推荐
- Asp.Net Core 输出 Word
In one of the ASP.NET Core projects we did in the last year, we created an OutputFormatter to provid ...
- codeforces616B
Dinner with Emma CodeForces - 616B Jack decides to invite Emma out for a dinner. Jack is a modest st ...
- iptables防火墙的原理及应用
简介 (netfilter, 位于Linux内核中的包过滤功能体系 ,称为Linux防火墙的“内核态”) iptables防火墙工作在网络层,针对TCP/IP数据包实施过滤和限制,iptables防 ...
- BZOJ4477[Jsoi2015]字符串树——可持久化trie树
题目描述 萌萌买了一颗字符串树的种子,春天种下去以后夏天就能长出一棵很大的字符串树.字符串树很奇特,树枝上都密密麻麻写满了字符串,看上去很复杂的样子.[问题描述]字符串树本质上还是一棵树,即N个节点N ...
- Codeforces Round #423 Div. 1
A:暴力赋值即可,并查集维护下一个未被赋值的位置. #include<iostream> #include<cstdio> #include<cmath> #inc ...
- Luogu5205 【模板】多项式开根（NTT+多项式求逆）
https://www.cnblogs.com/HocRiser/p/8207295.html 安利! 写NTT把i<<=1写成了i<<=2,又调了一年.发现我的日常就是数组开 ...
- bzoj 3123 [Sdoi2013]森林（主席树+启发式合并+LCA）
Description Input 第一行包含一个正整数testcase,表示当前测试数据的测试点编号.保证1≤testcase≤20. 第二行包含三个整数N,M,T,分别表示节点数.初始边数.操作数 ...
- EMM386和UMBPCI 区别
EMM386和UMBPCI 区别 1,SupportCD-ROM[HIMEM+EMM386NOEMS].支持光驱(EMM386模式)2,SupportCD-ROM[HIMEM+UMBPCI].支持光驱 ...
- emwin之基于某个事件或标志创建某个界面的一种方法
@2018-12-11 [小记] 例:定时器事件到来后切换至某个界面, 即在原始界面上发生跳转,在新界面上可返回至原始界面,可使用如下方法: a,在定时器事件发生后给原始界面中的自定义消息发送一条该自 ...
- zabbix添加ceph监控
应用背景: 网上监控ceph集群的资料不算多,git上有个开源的监控项目,是跟zabbix结合的,主要包含一个shell写的脚本和zabbix监控模板,拿来测试小记一下. 开源地址: https:// ...