JS异步编程中的回调与promise

2020-04-15  本文已影响0人  _远方没有诗

最近抽空复习了一下之前读过的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 对象有以下两个特点。

基本用法

// 我们定义三个异步行为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的回调函数。

上一篇下一篇

猜你喜欢

热点阅读