初步认识Promise
在解释什么是Promise之前,先看一道练习题,做完练习题也就知道Promise到底是干嘛用的了。
假设现在有个需求:你要封装一个方法,我给你一个要读取文件的路径,你这个方法能帮我读取文件,并把内容返回给我。
function getFileByPath(fpath, callback) {
fs.readFile(fpath, 'utf-8', (err, dataStr) => {
if (err) return callback(err)
callback(null, dataStr)
})
}
那么我们在下边调用一下
getFileByPath(path.join(__dirname, './files/1.txt'), (err, dataStr) => {
if (err) return console.log(err.message)
console.log(dataStr)
})
当我们调用了这个函数,无论读取过程成功了还是失败了,它们都共用了一个回调函数,我们为了区别到底是成功了还是失败了,我们想到一个办法,就是规定callback的参数第一个位置永远放err,第二个位置放成功的结果,对于一些大佬可能很好理解,对于初学者来说并不好理解,那么我们换另外一种写法,将callback拆分成两个函数,成功回调函数和失败回调函数。
function getFileByPath(fpath, succCb, errCb) {
fs.readFile(fpath, 'utf-8', (err, dataStr) => {
if (err) return errCb(err)
succCb(dataStr)
})
}
在上述代码中,succCb和errCb为函数的形参,它们到底要干嘛我们不知道,但是,调用者知道他们是干嘛的。接下来我们调用一下:
getFileByPath(path.join(__dirname, './files/11.txt'), function (data) {
console.log(data + '娃哈哈,成功了!!!')
}, function (err) {
console.log('失败的结果,我们使用失败的回调处理了一下:' + err.message)
})
那么,我们再改一下需求,先读取文件1,再读取文件2,最后再读取文件3
getFileByPath(path.join(__dirname, './files/1.txt'), function (data) {
console.log(data)
getFileByPath(path.join(__dirname, './files/2.txt'), function (data) {
console.log(data)
getFileByPath(path.join(__dirname, './files/3.txt'), function (data) {
console.log(data)
})
})
})
假如读取10个呢,一层套一层的写下去。如此写下去,我们成为回调地狱。
如何改造一下呢,我们可以使用ES6中Promise对象解决回调地域的问题。
Promise的本质就是为了解决回调地狱问题,并没有说可以帮我们减少代码量。
Promise到底是什么。我们可以在浏览器控制台上打印一下
首先我们看一下Promise是一个函数,再看他的名字,首字母大写通常我们把它当做构造函数。
1. Promise 是一个 构造函数,既然是构造函数, 那么,我们就可以 new Promise() 得到一个 Promise 的实例;
2. 在 Promise 上,有两个函数,分别叫做 resolve(成功之后的回调函数) 和 reject(失败之后的回调函数)
3. 在 Promise 构造函数的 Prototype 属性上,有一个 .then() 方法,也就说,只要是 Promise 构造函数创建的实例,都可以访问到 .then() 方法
4. Promise 表示一个 异步操作;每当我们 new 一个 Promise 的实例,这个实例,就表示一个具体的异步操作;
5. 既然 Promise 创建的实例,是一个异步操作,那么,这个 异步操作的结果,只能有两种状态:
5.1 状态1: 异步执行成功了,需要在内部调用 成功的回调函数 resolve 把结果返回给调用者;
5.2 状态2: 异步执行失败了,需要在内部调用 失败的回调函数 reject 把结果返回给调用者;
5.3 由于 Promise 的实例,是一个异步操作,所以,内部拿到 操作的结果后,无法使用 return 把操作的结果返回给调用者; 这时候,只能使用回调函数的形式,来把 成功 或 失败的结果,返回给调用者;
6. 我们可以在 new 出来的 Promise 实例上,调用 .then() 方法,【预先】 为 这个 Promise 异步操作,指定 成功(resolve) 和 失败(reject) 回调函数;
注意:这里 new 出来的 promise, 只是代表 【形式上】的一个异步操作;
什么是形式上的异步操作:就是说,我们只知道它是一个异步操作,但是做什么具体的异步事情,目前还不清楚
var promise = new Promise()
这是一个具体的异步操作,其中,使用 function 指定一个具体的异步操作
var promise = new Promise(function(){
// 这个 function 内部写的就是具体的异步操作!!!
})
再回到我们的问题,我们的初衷是: 给路径,返回读取到的内容
function getFileByPath(fpath) {
return new Promise(function (resolve, reject) {
fs.readFile(fpath, 'utf-8', (err, dataStr) => {
if (err) return reject(err)
resolve(dataStr)
})
})
}
getFileByPath('./files/1.txt')
.then(function (data) {
console.log(data + '-------')
}, function (err) {
console.log(err.message)
})
这样我们在连续读取三个文件的时候可以写成
getFileByPath('./files/1.txt')
.then(function (data) {
console.log(data)
// 读取文件2
return getFileByPath('./files/2.txt')
}, function (err) {
console.log('这是失败的结果:' + err.message)
// return 一个 新的 Promise
return getFileByPath('./files/2.txt')
})
.then(function (data) {
console.log(data)
return getFileByPath('./files/3.txt')
})
.then(function (data) {
console.log(data)
}).then(function (data) {
console.log(data)
})
上述代码中加了一个错误回调,如果第一个出错也希望程序继续将2,3文件读取完毕。如果其中一个出错不想继续执行,那么在结尾加上.catch(),它表示代码出错后捕获错误并输出。我们可以根据需求灵活的使用。
初步认识Promise的更多相关文章
- es6 快速入门 系列 —— promise
其他章节请看: es6 快速入门 系列 Promise Promise 是一种异步编程的选择 初步认识Promise 用 Promise 来实现这样一个功能:发送一个 ajax,返回后输出 json ...
- JavaScript异步和单线程
一,同步和异步的区别: 同步会阻塞代码执行,而异步不会.(比如alert是同步,setTimeout是异步) 二,前端使用异步的场景: 1,定时任务:setTimeout,setInterval 2, ...
- es6常用功能与异步详解(JS高级面试题)
callback hell方法的使用 可读性不友好 function loadImg(src,callback,fail){ var img = document.createElement('img ...
- Javascript高级面试
原型 异步 一.什么是单线程,和异步有什么关系 单线程:只有一个线程,同一时间只能做一件事原因:避免DOM渲染的冲突解决方案:异步 为什么js只有一个线程:避免DOM渲染冲突 浏览器需要渲染DOM J ...
- Promise (1) 初步接触
总想着王者荣耀排位赛再提升个等级就弃掉游戏好好学习,然而打了两个周也没升上去,看来是应该换个方向发挥了. 最近看了<javascript Promise迷离书>,对Promise的理解颇有 ...
- Promise 初步
在JavaScript的世界中,所有代码都是单线程执行的. 由于这个“缺陷”,导致JavaScript的所有网络操作,浏览器事件,都必须是异步执行.异步执行可以用回调函数实现: function ca ...
- 细说Promise
一.前言 JavaScript是单线程的,固,一次只能执行一个任务,当有一个任务耗时很长时,后面的任务就必须等待.那么,有什么办法,可以解决这类问题呢?(抛开WebWorker不谈),那就是让代码异步 ...
- 手把手教你实现一个完整的 Promise
用过 Promise,但是总是有点似懂非懂的感觉,也看过很多文章,还是搞不懂 Promise的 实现原理,后面自己边看文章,边调试代码,终于慢慢的有感觉了,下面就按自己的理解来实现一个 Promise ...
- 延期(deferred)的承诺(promise) — jq异步编程浅析
引子 相信各位developers对js中的异步概念不会陌生,异步操作后的逻辑由回调函数来执行,回调函数(callback function)顾名思义就是“回头调用的函数”,函数体事先已定义好,在未来 ...
随机推荐
- java多线程(死锁,lock接口,等待唤醒机制)
一.Lock接口 常用方法 Lock提供了一个更加面对对象的锁,在该锁中提供了更多的操作锁的功能. 使用Lock接口,以及其中的lock()方法和unlock()方法替代同步,对电影院卖票案例中Tic ...
- leetcode 169. Majority Element 、229. Majority Element II
169. Majority Element 求超过数组个数一半的数 可以使用hash解决,时间复杂度为O(n),但空间复杂度也为O(n) class Solution { public: int ma ...
- Web Storage和cookie
Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生; Web Storage的概念和cookie相似,区别是它是为了更大容 ...
- [JLOI2015]骗我呢
[JLOI2015]骗我呢 Tags:题解 作业部落 评论地址 TAG:数学,DP 题意 骗你呢 求满足以下条件的\(n*m\)的矩阵的个数对\(10^9+7\)取模 对于矩阵中的第\(i\)行第\( ...
- 在Bootstrap开发框架中使用dataTable直接录入表格行数据(2)--- 控件数据源绑定
在前面随笔<在Bootstrap开发框架中使用dataTable直接录入表格行数据>中介绍了在Web页面中使用Jquery DataTable插件进行对数据直接录入操作,这种处理能够给用户 ...
- ADO.NET之使用DataSet类更新数据库
1.首先从数据库获得数据填充到DataSet类,该类中的表和数据库中的表相互映射. 2.对DataSet类中的表进行修改(插入,更新,删除等) 3.同步到数据库中:使用SqlDataAdapter实例 ...
- 关于H5页面中生成图片的两种方式!
前言: 我们在做项目过程中,经常会遇到自定义生成一张图片并可以长按保存.长按保存图片在微信等浏览器中默认就有,那么对于生成图片的有哪些方式呢? 方法一: 利用canvas绘制图形,然后生成图片 代码如 ...
- 跨域两种解决方案CORS以及JSONP
一.CORS设置请求头 设置请求头实现跨域: //跨域的浏览器会让请求带Origin头,表明来自哪里的跨域请求 Origin: http://xxx.example //表明允许跨域访问 Access ...
- 爬取页面InsecureRequestWarning: 警告解决笔记
InsecureRequestWarning: Unverified HTTPS request is being made. Adding certificate verification is s ...
- ES 应用
1. ES的不同之处: 全文检索.处理同义词.通过相关性给文档评分, 从同样的数据中生成分析与聚合数据, 实时大型批处理. 安装es与kibana 1.下载:https://www.elastic ...