说明:
本博客来源于以下博客和《你不知道的JavaScript》中卷,原博客链接为:http://www.cnblogs.com/wangfupeng1988/p/6515855.html
ES6的Promise基本使用示例
1、传统的异步操作
var wait = function () {
var task = function () {
console.log('执行完成')
}
setTimeout(task, 2000)
}
wait()
2、用Promise进行封装
const wait = function () {
// 定义一个 promise 对象
const promise = new Promise((resolve, reject) => {
// 将之前的异步操作,包括到这个 new Promise 函数之内
const task = function () {
console.log('执行完成')
resolve() // callback 中去执行 resolve 或者 reject
}
setTimeout(task, 2000)
})
// 返回 promise 对象
return promise
}
- 将之前的异步操作那几行程序,用
new Promise((resolve,reject) => {.....})
包装起来,最后return
即可 - 异步操作的内部,在
callback
中执行resolve()
(表明成功了,失败的话执行reject()
)
继续往下看。
const w = wait()
w.then(() => {
console.log('ok 1')
}, () => {
console.log('err 1')
}).then(() => {
console.log('ok 2')
}, () => {
console.log('err 2')
})
wait()
返回的是一个promise
对象,而promise
对象有then
属性。
注:
then
接收两个参数(函数),第一个在成功时(触发resolve)执行,第二个在失败时(触发reject)时执行。而且,then还可以进行链式操作。
上面就是ES6的Promise基本使用示例。
Promise在ES6中的具体应用
1、准备工作
因为以下所有的代码都会用到Promise,因此在所有介绍之前,先封装一个Promise,封装一次,为下面多次应用。
const fs = require('fs')
const path = require('path') // 后面获取文件路径时候会用到
const readFilePromise = function (fileName) {
return new Promise((resolve, reject) => {
fs.readFile(fileName, (err, data) => {
if (err) {
reject(err) // 注意,这里执行 reject 是传递了参数,后面会有地方接收到这个参数
} else {
resolve(data.toString()) // 注意,这里执行 resolve 时传递了参数,后面会有地方接收到这个参数
}
})
})
}
以上代码是一段 nodejs 代码,将读取文件的函数fs.readFile封装为一个Promise。
2、参数传递
我们要使用上面封装的readFilePromise
读取一个 json 文件../data/data2.json,这个文件内容非常简单:{"a":100, "b":200}
先将文件内容打印出来,代码如下。大家需要注意,readFilePromise
函数中,执行resolve(data.toString())
传递的参数内容,会被下面代码中的data
参数所接收到。
const fullFileName = path.resolve(__dirname, '../data/data2.json')
const result = readFilePromise(fullFileName)
result.then(data => {
console.log(data)
})
再加一个需求,在打印出文件内容之后,我还想看看a属性的值,代码如下:
const fullFileName = path.resolve(__dirname, '../data/data2.json')
const result = readFilePromise(fullFileName)
result.then(data => {
// 第一步操作
console.log(data)
return JSON.parse(data).a // 这里将 a 属性的值 return
}).then(a => {
// 第二步操作
console.log(a) // 这里可以获取上一步 return 过来的值
})
之前我们已经知道then
可以执行链式操作,如果then
有多步骤的操作,那么前面步骤return
的值会被当做参数传递给后面步骤的函数,上面代码中的a
就接收到了return JSON.parse(data).a
的值。
总结下:
1. 执行resolve
传递的值,会被第一个then
处理时接收到
2. 如果then
有链式操作,前面步骤返回的值,会被后面的步骤获取到
3、异常捕获
我们知道then
会接收两个参数(函数),第一个参数会在执行resolve
之后触发(还能传递参数),第二个参数会在执行reject
之后触发(其实也可以传递参数,和resolve
传递参数一样),但是上面的例子中,我们没有用到then
的第二个参数。这是为何呢 ———— 因为不建议这么用。
对于Promise
中的异常处理,我们建议用catch
方法,而不是then
的第二个参数。请看下面的代码,以及注释。
const fullFileName = path.resolve(__dirname, '../data/data2.json')
const result = readFilePromise(fullFileName)
result.then(data => {
console.log(data)
return JSON.parse(data).a
}).then(a => {
console.log(a)
}).catch(err => {
console.log(err.stack) // 这里的 catch 就能捕获 readFilePromise 中触发的 reject ,而且能接收 reject 传递的参数
})
在若干个then串联之后,我们一般会在最后跟一个.catch来捕获异常,而且执行reject时传递的参数也会在catch中获取到。好处是:
- 让程序看起来更加简洁,是一个串联的关系,没有分支(如果用then的两个参数,就会出现分支,影响阅读)
- 看起来更像是try - catch的样子,更易理解
4、串联多个异步操作(链式流)
如果现在有一个需求:先读取data2.json的内容,当成功之后,再去读取data1.json。这样的需求,如果用传统的callback去实现,会变得很麻烦。而且,现在只是两个文件,如果是十几个文件这样做,写出来的代码就没法看了。但是Promise可以轻松胜任这项工作。
const fullFileName2 = path.resolve(__dirname, '../data/data2.json')
const result2 = readFilePromise(fullFileName2)
const fullFileName1 = path.resolve(__dirname, '../data/data1.json')
const result1 = readFilePromise(fullFileName1)
result2.then(data => {
console.log('data2.json', data)
return result1 // 此处只需返回读取 data1.json 的 Promise 即可
}).then(data => {
console.log('data1.json', data) // data 即可接收到 data1.json 的内容
})
上面的“参数传递”提到了,如果then有链式操作,前面步骤返回的值,会被后面的步骤获取到。但是,如果前面步骤返回值是一个Promise的话,情况就不一样了——如果前面返回的是Promise对象,后面的then将会被当做这个返回的Promise的第一个then来对待
5、Promise.all和Promise.race的应用
现在有需求如下:
读取两个文件data1.json和data2.json,现在我需要一起读取这两个文件,等待它们全部都被读取完,再做下一步的操作。此时需要用到Promise.all。
// Promise.all 接收一个包含多个 promise 对象的数组
Promise.all([result1, result2]).then(datas => {
// 接收到的 datas 是一个数组,依次包含了多个 promise 返回的内容
console.log(datas[0])
console.log(datas[1])
})
读取两个文件data1.json和data2.json,现在我需要一起读取这两个文件,但是只要有一个已经读取了,就可以进行下一步的操作。此时需要用到Promise.race。
// Promise.race 接收一个包含多个 promise 对象的数组
Promise.race([result1, result2]).then(data => {
// data 即最先执行完成的 promise 的返回值
console.log(data)
})
6、Promise.resolve的应用
6.1 new Promise的快捷方式
静态方法Promise.resolve(value)
可以认为是 new Promise()
方法的快捷方式。
比如:Promise.resolve(42);
可以认为是以下代码的语法糖。
new Promise(function(resolve){
resolve(42);
});
在这段代码中的 resolve(42);
会让这个promise
对象立即进入确定(即resolved
)状态,并将 42
传递给后面then里所指定的函数。
方法 Promise.resolve(value);
的返回值也是一个promise
对象,所以我们可以像下面那样接着对其返回值进行 .then
调用。
Promise.resolve(42).then(function(value){
console.log(value);
});
6.2 Thenable
Promise.resolve
方法另一个作用就是将 thenable
对象转换为promise
对象。
那么,什么是thenable
对象呢?看下面的例子:
// 定义一个 thenable 对象
const thenable = {
// 所谓 thenable 对象,就是具有 then 属性的对象,而且属性值是如下格式函数的对象
then: (resolve, reject) => {
resolve(200)
}
}
到底什么样的对象能算是thenable
的呢,最简单的例子就是 jQuery.ajax()
,它的返回值就是thenable
的。
将thenable
对象转换成Promise
对象,就用到了Promise.resolve
来转换。
var promise = Promise.resolve($.ajax('/json/comment.json'));// => promise对象
promise.then(function(value){
console.log(value);
});
jQuery.ajax()
的返回值是一个具有.then
方法的jqXHR Object
对象,这个对象继承了来自Deferred Object
的方法和属性。
但是Deferred Object
并没有遵循Promises/A+或ES6 Promises标准,所以即使看上去这个对象转换成了一个promise
对象,但是会出现缺失部分信息的问题。
这个问题的根源在于jQuery的Deferred Object
的then
方法机制与promise
不同。
注意:如果向Promise.resolve(...)
传递一个真正的promise
,就只会返回同一个promise
。看如下例子:
var p1 = Promise.resolve(42);
var p2 = Promise.resolve(p1);
p1 === p2; //true
术语:决议、完成及拒绝
我们先来研究下构造器Promise(...)
:
var p = new Promise(function(x,y){
//x()用于完成
//y()用于拒绝
});
这里提供了两个回调(称为X和Y)。第一个通常用于标识Promise
已经完成,第二个总是用于标识Promise
被拒绝。这个“通常”是什么意思呢?对于这些参数的精确命名又意味着什么呢?
对于第二个参数名很容易决定。因为这就是它真实的(也是唯一的)工作。但是,第一个参数就有一些模糊了。第一个参数标识Promise
完成,为什么不用fulfill
呢?
我们先来看两个Promise API
方法:
var fulfilledPr = Promise.resolve(42);
var rejectedPr = Promise.reject("Oops");
Promise.resolve(...)
创建了一个决议为输入值的Promise
。这个例子中,42是一个非Promise
、非thenable
的普通值,所以完成后的promise fulfilledPr
是为值42创建的。Promise.reject("Oops")
创建了一个被拒绝的Promise rejectedPr
,拒绝理由为“Oops”
。
现在来解释单词resolve
用于表达结果可能是完成也可能是拒绝,既没有歧义,也确实更精确。
//thenable对象
var rejectedTh = {
then: function(resolved,rejected){
rejected("Oops");
}
};
var rejectedPr = Promise.resolve(rejectedTh);
Promise.resolve(...)
会将传入的真正Promise
直接返回,对传入的thenable
则会展开。如果这个thenable
展开得到一个拒绝状态,那么从Promise.resolve(...)
返回的Promise
实际上就是这同一个拒绝状态。
Promise(...)
构造器的第一个参数回调会展开thenable
或真正的Promise
:
var rejectedPr = new Promise(function(resolve,reject){
//用一个被拒绝的promise完成这个promise
resolve(Promise.reject("Oops"));
});
rejectedPr.then(
function fulfilled(){
//永远不会到这里
},
function rejected(err){
console.log(err);//Oops
}
);
现在应该很清楚了,Promise(...)
构造器的第一个回调参数的恰当称谓是resolve(...)
。
reject(...)
不会像resolve(...)
一样进行展开。如果向reject(...)
传入一个Promise/thenable
值,它会把这个值原封不动的设置为拒绝理由。