Promise介绍及使用场景
Promise 介绍
Promise 是一个构造函数，是异步编程的一种解决方案。所谓Promse,它本身就是一个容器，里面保存着异步操作的结果，对的，这和回调函数类似。
Promise 容器本身不是异步的，而里面封装一个异步任务。他有三种状态，即：1.pending(进行中)、2.resolved(成功)、3.rejected(失败)。状态只能变为一种。
Promise 获取文件信息
const fs = require('fs');
let p1 = new Promise((resolve, reject) => {
fs.readFile('./data/a.txt', 'utf8', (error, data) => {
if (error) {
reject(error);
} else {
resolve(data);
}
});
});
let p2 = new Promise((resolve, reject) => {
fs.readFile('./data/b.txt', 'utf8', (error, data) => {
if (error) {
reject(error);
} else {
resolve(data);
}
});
});
let p3 = new Promise((resolve, reject) => {
fs.readFile('./data/c.txt', 'utf8', (error, data) => {
if (error) {
reject(error);
} else {
resolve(data);
}
});
});
// then 的链式编程
p1
.then(data => {
console.log('a的数据', data);
// 当 p1 读取成功的时候
// 当前函数中 return 的结果就是后面的 then 中 Function 接收到
// 当你 return 123 后面就接收到 123
// 没有 return,后面接收到的就是 undefined
// 上面那些 return 的数据没什么软用
// 真正有用的事，return 一个 Promise 对象
// 当 return 一个 Promise 对象的时候，后续的 then 中的方法的第一个参数会作为 这个对象的结果
return p2;
}, error => {
console.log('读取文件a失败了', error);
})
.then(data => {
console.log('b的数据', data);
return p3;
}, error => {
console.log('读取文件b失败了', error);
})
.then(data => {
console.log('c的数据', data);
}, error => {
console.log('读取文件c失败了', error);
})
显然，上面这个例子显得特别麻烦！
选择，让我们封装 Promise
const fs = require('fs');
const pReadFile = (filePath) => {
return new Promise((resolve, reject) => {
fs.readFile(filePath, 'utf8', (error, data) => {
if (error) {
reject(error);
} else {
resolve(data);
}
});
});
};
pReadFile('./data/a.txt')
.then(data => {
console.log('a文件数据: ', data);
return pReadFile('./data/b.txt');
})
.then(data => {
console.log('b文件数据: ', data);
return pReadFile('./data/c.txt');
})
.then(data => {
console.log('c文件数据: ', data);
});
Promise 配合 AJAX 获取信息
data.json文件：
{
"users": [
{
"id": 1,
"username": "admin-1",
"age": 18,
"job": 2
},
{
"id": 2,
"username": "admin-2",
"age": 18,
"job": 4
},
{
"id": 3,
"username": "admin-3",
"age": 18,
"job": 5
}
],
"jobs": [
{
"id": 1,
"name": "学生"
},
{
"id": 2,
"name": "老师"
},
{
"id": 3,
"name": "司机"
},
{
"id": 4,
"name": "演员"
},
{
"id": 5,
"name": "工程师"
},
{
"id": 6,
"name": "程序员"
}
]
}
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>独秀不爱秀</title>
</head>
<body>
<form id="user-form"></form>
<script type="text/html" id="tpl">
<div>
<label for="">用户名</label>
<input type="text" value="{{ user.username }}">
</div>
<div>
<label for="">年龄</label>
<input type="number" 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 }}
</select>
</div>
</script>
<script src="node_modules/art-template/lib/template-web.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript">
/**
* 既可以实现 callback 获取
* 也可以实现 .then 方式获取
*/
const pGet = (url, callback) => {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onload = () => {
resolve(JSON.parse(xhr.responseText));
callback && callback(JSON.parse(xhr.responseText));
}
xhr.onerror = (error) => reject(error);
xhr.open('get', url);
xhr.send();
});
}; let currentData = {};
pGet('./data.json')
.then((data) => {
currentData.user = data.users[0];
return data.jobs;
})
.then((jobsData) => {
currentData.jobs = jobsData;
let htmlStr = template('tpl', currentData);
document.getElementById('user-form').innerHTML = htmlStr;
}); </script>
</body>
</html>
Promise介绍及使用场景的更多相关文章
- Redis常用数据类型介绍、使用场景及其操作命令
Redis常用数据类型介绍.使用场景及其操作命令 本文章同时也在cpper.info发布. Redis目前支持5种数据类型,分别是: 1.String(字符串) 2.List(列表) 3.Hash(字 ...
- 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_6-2.申请微信支付介绍和不同场景的支付方式
笔记 2.申请微信支付介绍和不同场景的支付方式 简介:介绍微信商户平台,支付方式和使用场景,申请微信支付流程 1.什么是微信商户平台: ...
- 小D课堂 - 新版本微服务springcloud+Docker教程_6-01 微服务网关介绍和使用场景
笔记 第六章 微服务网关zuul开发实战 1.微服务网关介绍和使用场景 简介:讲解网关的作用和使用场景 (画图) 1)什么是网关 API Gateway,是系 ...
- MySQL主从复制介绍：使用场景、原理和实践
MySQL主从复制介绍:使用场景.原理和实践 MySQL数据库的主从复制方案,和使用scp/rsync等命令进行的文件级别复制类似,都是数据的远程传输,只不过MySQL的主从复制是其自带的功能,无需借 ...
- promise介绍
promise简介 Promise的出现,原本是为了解决回调地狱的问题.所有人在讲解Promise时,都会以一个ajax请求为例,此处我们也用一个简单的ajax的例子来带大家看一下Promise是如何 ...
- 【memcache缓存专题(1)】memcache的介绍与应用场景
简介 Memcached是一个高性能的分布式的内存对象缓存系统,目前全世界不少人使用这个缓存项目来构建自己大负载的网站,来分担数据库的压力,通过在内存里维护一个统一的巨大的hash表,它能够用来存储各 ...
- key-list类型内存数据引擎介绍及使用场景
“互联网数据目前基本使用两种方式来存储,关系数据库或者key value.但是这些互联网业务本身并不属于这两种数据类型,比如用户在社会化平台中的关系,它是一个list,如果要用关系数据库存储就需要转换 ...
- Redis学习笔记（4）——Redis五大数据结构介绍以及应用场景
出处:https://www.jianshu.com/p/f09480c05e42 Redis是典型的Key-Value类型数据库,Key为字符类型,Value的类型常用的为五种类型:String.H ...
- Java 四种引用介绍及使用场景
强引用-FinalReference 介绍: 强引用是平常中使用最多的引用,强引用在程序内存不足(OOM)的时候也不会被回收,使用方式: String str = new String("s ...
随机推荐
- python基础语法19 面向对象总结，pickle保存对象注意事项
面向对象的三大特性: 继承,封装,多态 多态的三种表现形式:鸭子类型,继承父类,继承抽象类 pickle保存对象注意事项 class Foo: y = 20 def __new__(cls, *arg ...
- 14-C#笔记-字符串
1. 基本操作 using System; namespace StringApplication { class Program { static void Main(string[] args) ...
- Pandas | 21 日期功能
日期功能扩展了时间序列,在财务数据分析中起主要作用.在处理日期数据的同时,我们经常会遇到以下情况 - 生成日期序列 将日期序列转换为不同的频率 创建一个日期范围 通过指定周期和频率,使用date.ra ...
- redhat quay 安装试用
最近redhat 开源了quay 容器镜像管理平台,参考官方文档跑的时候需要订阅,各种不好使,然后就自己基于源码构建了 一个镜像(使用官方的dockerfile,构建出来的太大了1.9G 以及push ...
- 洛谷P2504 [HAOI2006]聪明的猴子题解
题目 记录悲伤 已知猴子的数量以及猴子跳的最大距离 已知数的数量以及树的坐标 最小生成树 每两棵树之间的距离需要枚举来计算 算出最大值之后再与n只猴子进行比较记录答案 需要注意 在使用最小生成树的时候 ...
- 【LG2567】[SCOI2010]幸运数字
[LG2567][SCOI2010]幸运数字 题面 洛谷 题目大意: 问你区间\([L,R](1\leq L\leq R\leq 10^{10})\)中有几个数是仅由\(6,8\)组成的数的倍数. 题 ...
- asp.net core nginx配置问题解决
1.无法访问nginx到发布的站点,但是使用原配置(nginx.conf)却可以.使用新建的配置conf.d/netcore.conf不行. 2.在windows浏览中访问http://xxx.xxx ...
- HttpClient代理IP及设置连接读取超时
1.不废话,上代码: public static void main(String[] args) throws Exception { CloseableHttpClient httpClient ...
- 备忘Sourcetree配置
一. 设置用户名 对应路径:C:\Users\用户名\.gitconfig 二.验证账号 三.添加ssh key 创建ssh密码 保存key,路径:C:\Users\用户名\.ssh 配置Pagean ...
- nginx+keepalived高可用及双主模式【h】
高可用有2中方式. 1.Nginx+keepalived 主从配置 这种方案,使用一个vip地址,前端使用2台机器,一台做主,一台做备,但同时只有一台机器工作,另一台备份机器在主机器不出现故障的时候, ...