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 ...
随机推荐
- C#/.Net判断是否为周末/节假日
判断节假日请求的Api:http://tool.bitefu.net/jiari/ /// <summary> /// 判断是不是周末/节假日 /// </summary> / ...
- JavaScript简单简介
JavaScript,男,web页面的一种脚本编程语言,1955年诞生,妻子为HTML,魔法能力是将静态页面(经过与用户交互与相应)转变为动态页面. 刚进入浏览器市场(魔界)的时候,也就是js1.0岁 ...
- 【python练习题】程序12
#题目:判断101-200之间有多少个素数,并输出所有素数. #判断素数的方法:用一个数分别去除2到sqrt(这个数),如果能被整除,则表明此数不是素数,反之是素数. from math import ...
- 使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件
使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件
- 训练赛-Move Between Numbers
题意:给你n个数,每个数有20个数字,每两个数字之间如果相等的数字数量为17个(一定是17),就能从一个数字到达另一个数字,给你两个数字编号,求从第一个数字编号到第二个数字编号之间最少需要走几次: 解 ...
- 11/5/2018模拟 Problem C
题面 题解 我有特殊的哈希技巧 以到下一个相同字符的距离为值哈希, 如果不存在或在串外, 就是 \(|T| + 1\). 加入一个新字符 \(S_i\) 时, 同时修改它上一次出现时的值, 由 \(| ...
- Bootstrap modal 模态框垂直居中显示补丁
<script> $.fn.modal.Constructor.prototype.adjustDialog1 = function(){ var modalIsOverflowing = ...
- pycharm pip 源修改以及包管理（转载）
转载自(https://www.u3v3.com/ar/1352) pycharm下如何将默认的pip源改成国内能快速访问的源, 以及如何进行包管理 pycharm 是一款进行python项目开发的利 ...
- linux目录文件及系统启动知识
一.Linux系统目录结构介绍 1.Linux 与 Windows目录结构对比 Linux与Windows的目录结构对比见下图. Linux 目录特点: /etc/hosts /root/d ...
- FPGA中亚稳态相关问题及跨时钟域处理
前言 触发器输入端口的数据在时间窗口内发生变化,会导致时序违例.触发器的输出在一段时间内徘徊在一个中间电平,既不是0也不是1.这段时间称为决断时间(resolution time).经过resolut ...