使用es6中的Promise来取代回调

该文章由 leevare 发布于 ,归类于 Javascript

所谓 Promise,就是一个对象,用来传递异步操作的消息。它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的 API,可供进一步处理。

当有这样一个需求。事件A执行完之后执行事件B,B执行之后执行C,C执行之后执行D,你首先能想到的是怎么实现?

使用函数回调的方式如下:

function handleEvent(someEvent, callback) {
    //some code...

    callback && callback()
}

handleEvent(A, function() {
    handleEvent(B, function() {
        handleEvent(C, function() {
            handleEvent(D)
        })
    })
})

可以看到,callback的嵌套非常多,一层嵌套一层,但是如果D后面还需要执行许多事件的时候,那么就会继续的嵌套下去,这样代码修改和维护起来将会十分困难。

那么,使用Promise来改写这个需求。

Promise 构造函数接受一个函数作为参数,该函数的两个参数分别是 resolve 方法和 reject 方法。

如果异步操作成功,则用 resolve 方法将 Promise 对象的状态,从「未完成」变为「成功」;

如果异步操作失败,则用 reject 方法将 Promise 对象的状态,从「未完成」变为「失败」。

function handlePromise(someEvent) {
    return new Promise((resolve, reject) => {
        //some code

        if (success) {
            //成功时
            resolve(value)
        } else {
            //失败时
            reject(error)
        }
    })
}

handlePromise(A)
    .then(() => handlePromise(B))
    .then(() => handlePromise(C))
    .then(() => handlePromise(D))

将事件写到then中,这样看起来也会更加地优雅,维护起来也会更加容易。

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒