JS异步编程中的回调与promise
最近抽空复习了一下之前读过的JS书,看了一下关于回调函数和promise相关部分。
回调函数
提到异步编程,尽管发展到如今,js中解决异步的方式已经出现了很多种,Promise、async/await... 但不可否认,在这些出现之前,我们采用的最常规的方式就是回调函数,可以说,回调函数是js中最基础的异步模式。但尽管如此,回调还是存在着很多不可忽视的缺点。
- 执行顺序
思考这样一段代码
fs.readFile('file.txt', 'utf-8', functino(data){
console.log('A');
setTimeout(function () {
console.log('B')
}, 0)
console.log('C')
})
console.log('D');
有经验的同学可能稍加推敲就能得出正确结论,
D A C B
但不可置否,这样一段代码的执行顺序是违背我们大脑的正常思维顺序的,我们在大脑中是不断上下跳跃着的。再有,如果把上面的setTimeout换成一个同步函数呢?那么结果就是D A B C。再如果它只是会视情况而定同步或者异步,也就是我们并不确定它是同步还是异步,这样的情况下,我们如何解决呢?
解决方法或许只能将每个步骤硬编码到前一个步骤中了。
但是上述只是个简单例子,现实中的项目远比这个复杂,嵌套的更深,状态更多,
这种方式使得代码可复用性变差,维护成本变高,与我们现在提倡的低耦合相驳。
- 控制反转
// 假如doSomeThing()是一个第三方api,负责做某些事情
// 通过传一个callback来执行接下来的步骤
doSomeThing('...', function () {
// ...
})
上述例子中, callback的执行取决于doSomeThing(),这种现象叫做"控制反转",如果doSomeThing中发生异常,或者说doSomeThing是一个你根本不了解的第三方api,那么你所传的callback可能出现任何你想不到的情况,因为此时callback的控制权并不在你手中, 你不能决定它何时调用,调用次数,是否传参等等等等....
引用《你不知道的JavaScript中卷》
回调最大的问题是控制反转,它会导致信任链的完全断裂。
总而言之,我们需要一种比回调更好的机制,来解决执行顺序、信任的问题。值得欣喜的是,JS目前已经提供了很多更加强大的异步模式,Promise就是其中之一。
Promise
所谓 Promise,就是一个对象,用来传递异步操作的消息。它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的 API,可供进一步处理。
Promise 对象有以下两个特点。
-
对象的状态不受外界影响。Promise 对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称 Fulfilled)和 Rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来,它的英语意思就是「承诺」,表示其他手段无法改变。
-
一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise 对象的状态改变,只有两种可能:从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对 Promise 对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
基本用法
// 我们定义三个异步行为A、B、C
function A (cb) {
setTimeout(function () {
console.log('执行A')
cb && cb()
})
}
function B (cb) {
setTimeout(function () {
console.log('执行B')
cb && cb()
})
}
function C (cb) {
setTimeout(function () {
console.log('执行C')
cb && cb()
})
}
假设这三个行为是相互依赖关系执行,也就是A执行完再执行B,B执行完再执行C
首先看es5的实现方式
A(B(C))
在看Promise版本
function A () {
return new Promise((resolve, reject) => {
setTimeout(function () {
console.log('执行A')
resolve()
})
})
}
function B () {
return new Promise((resolve, reject) => {
setTimeout(function () {
console.log('执行B')
resolve()
})
})
}
function C () {
return new Promise((resolve, reject) => {
setTimeout(function () {
console.log('执行C')
resolve()
})
})
}
A().then(B).then(C);
怎么样,是不是觉得清晰了很多?
回想一下我们在上面回调函数中遇到的两个问题 执行顺序 和 控制反转
- 执行顺序
我们可以看到 在promise中我们可以很清晰的看出来,先执行A接下来是B然后是C,并且我们也不需要关心A或者B中是同步还是异步操作,无论同步异步都不会影响到执行顺序。
这种方式使得我们的代码一眼就可以看清楚他的执行流程,无论维护成本还是清晰程度都比回调函数要好的多,避免了“Callback Hell(回调地狱)”
- 控制反转
Promise拥有个then方法,then方法的第一个参数是resolved状态的回调函数,第二个参数(可选)是rejected状态的回调函数。我们可以根据promise的状态,如果为resolved,就调用第一个回调函数,如果状态变为rejected,就调用第二个回调函数。这样我们相当于把控制权重新拿回到我们自己手中。
举个例子
function A () {
return new Promise((resolve, reject) => {
setTimeout(function () {
console.log('执行A')
resolve('a')
})
})
}
A().then(function(data){
// data就是A返回的proise状态成功后所返回的值
console.log(data); // 'a'
}, function(err) {
// 如果A的状态变为reject,将会处罚这个回调函数
})
除了then之外,promise还有几个方法。
Promise.prototype.catch();
Promise.prototype.catch()方法是.then(null, rejection)或.then(undefined, rejection)的别名,用于指定发生错误时的回调函数
promiseFn.then(function(posts) {
// ...
}).catch(function(error) {
// 处理 promiseFn 和 前一个回调函数运行时发生的错误
console.log('发生错误!', error);
});
Promise.all()
Promise.all()用于将多个 Promise 实例,包装成一个新的 Promise 实例。
const p = Promise.all([p1, p2, p3]);
返回的结果是一个数组,里面对应参数中的几个promise实例的返回值。
只有当这几个实例的状态都变成成功,或者其中有一个变为失败,才会调用Promise.all方法后面的回调函数。
Promise.race()
Promise.race()方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。
const p = Promise.race([p1, p2, p3]);
但是不同于Promise.all的是,只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数。