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 ...
随机推荐
- react 入坑笔记（四） - React 事件绑定和传参
React 事件处理 建议:在了解 js 的 this 取值后食用更佳. 一.react 与 Html 中用法的异同和注意点 html 中的绑定事件的写法: <button onclick=&q ...
- 灰度图Matlab
[转载]matlab中pcolor绘图“少画一行”的问题 本文是关于matlab pcolor函数(slice,surf函数的情况与这个类似)绘图的问题的一些解决方案,在此记录备用 经 常处理三维(或 ...
- 资源推荐：特意挑选了11个可以称得上“神器”的Windows工具下载
特意挑选了11个可以称得上“神器”的Windows工具,安装包获取方式在文末. 以下神器包含:OCR文字识别.百度云超速下载工具.本地文件搜索工具.软件卸载器.本地视频播放器.图片去水印神器.百度文库 ...
- python之旅七【第七篇】面向对象之类成员
面向对象的类成员 相关知识点 一 字段 字段包括:普通字段和静态字段,他们在定义和使用中有所区别,而最本质的区别是内存中保存的位置不同, 普通字段属于对象 静态字段属于类 class Provinc ...
- 【XSY2741】网格 分治 LCT 并查集
题目描述 有一个\(n\times m\)的网格,线框的交点可以扭动,边不可伸缩.网格中有一些格子里面放了'x'形的支架,这些格子不会变形,但可以整体转动.如果所有格子都不能变形,那么称这个网格稳固. ...
- tp5 日志管理
日志驱动 日志可以通过驱动支持不同的方式写入,默认日志会记录到文件中,系统已经内置的写入驱动包括 File.Socket,如果要临时关闭日志写入,可以设置日志类型为Test即可,例如: 'log' = ...
- 「HDU6158」 The Designer（圆的反演）
题目链接多校8-1009 HDU - 6158 The Designer 题意 T(<=1200)组,如图在半径R1.R2相内切的圆的差集位置依次绘制1,2,3,到n号圆,求面积之和(n< ...
- 【CodeForces 730H】Delete Them
BUPT 2017 summer training (for 16) #1E 题意 找到匹配要删除的文件名们但不匹配其它文件名们的表达式.其中?匹配所有字符,其它字符匹配本身. 题解 如果某个位置出现 ...
- Nginx 添加 PHP 支持
背景介绍默认安装的Nginx是无法打开php文件的,需要修改相关配置才能支持php 安装yum -y install epel-release yum -y install nginx yum ins ...
- SA / SAM 题目集
上一次做 SA / SAM 相关的题还要数到某场毒瘤 NOIP 模拟赛--这么久没做了都快忘光了--写点东西记录一些最近做到的水好题. LOJ2059 「TJOI / HEOI2016」字符串 题意 ...