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 ...
随机推荐
- LODOP循环多任务 同模版只设置不同队列任务名
LODOP中从PRINT_INIT(或PRINT_INITA)到最后PRINT(或PREVIEW等),是一个任务,关于Lodop中一个任务,以及一个任务中可以包含哪些语句,详细可查看本博客另一篇博文: ...
- WinForm中在非UI线程更改控件值的办法
从非UI线程调用UI控件赋值.或进行其他更新UI的操作的话,会出现异常: System.InvalidOperationException:“线程间操作无效: 从不是创建控件“xxx”的线程访问它.” ...
- const函数
1. const修饰成员函数:表示不可以修改成员变量 class test{ public: test(){ i_ = ; } int Get() const{ //i_ = 0; //error:不 ...
- spring 在容器中一个bean依赖另一个bean 需要通过ref方式注入进去 通过构造器 或property
spring 在容器中一个bean依赖另一个bean 需要通过ref方式注入进去 通过构造器 或property
- JdbcTemplate的运用 (也是数据源的一种)
- Luogu5280 ZJOI2019线段树（线段树）
容易发现相当于求2m种操作序列所得的每种线段树tag数量之和.显然考虑每个点的贡献,也即有多少种方案会使该点上有tag.可以将点分为四类: 1.修改时被经过且有儿子被修改的节点 2.修改时被经过且没有 ...
- P1140 相似基因 最长公共子序列
思路 类似于最长公共子序列 把一段基因和另外一段基因匹配 不够长的用空基因替换 #include<bits/stdc++.h> using namespace std; const in ...
- 字符串哈希及KMP
字符串很神奇,因为它在计算机中应用很广泛,就每一个程序都需要用到字符串,所以学好字符串是非常重要的. 接下来就介绍两个字符串的基本操作 1:字符串hash 一种可以查找几个字符串有几个不同的字符串. ...
- Matplotlib学习---用matplotlib画散点图，气泡图（scatter plot, bubble chart）
Matplotlib里有两种画散点图的方法,一种是用ax.plot画,一种是用ax.scatter画. 一. 用ax.plot画 ax.plot(x,y,marker="o",co ...
- 网络流24（san）题题解汇总
开坑(烂尾预定 1.餐巾计划问题 题解 2.最小路径覆盖问题 题解 3.试题库问题 题解 4.[CTSC1999]家园 题解 5.骑士共存问题 题解 6.最长不下降子序列问题 题解 7.深海机器人问题 ...