记一次使用Promise

前言

还不知道 Promise 是什么，可以看看JavaScript Promise迷你书（中文版）

代码中会用一些es6的语法，ECMAScript 6 入门

如何使用

一般情况 Promise 用于解决异步回调问题，让代码看起来很直观。例如，以前我们用 jQuery 的 ajax 模块的时候是这样的。

$.ajax({
    url: '/xx',
    success: () => {},
    error: () => {}
})

后来 jQuery 根据 Promise 的规范，实现了 Deferred 模块，并且在 jQuery 内部使用了。

$.ajax({
    url: '/xx'
})
.done((res) => {
    // todo
})
.fail((res) => {
    // todo
})

假若说一个ajax后还要进行一次ajax呢？

$.ajax({
    url: '/xx'
})
.done((res) => {
    $.ajax({
        url: '/xx'
    })
    .done((res) => {
        // todo
    })
    .fail((res) => {
        // todo
    })
})
.fail((res) => {
    // todo
})

真的是这样吗？

更好的使用

把ajax结束的操作写到success的函数中，如果有多个请求，并且是有关联、依次的方式，就会不断在success回调中嵌入。俗称 回调地狱 。

如果有一天业务发生了变化，就要解开各种嵌套的回调，修改起来很麻烦，同时代码也很难阅读。

使用 Promise ，可以这样玩了。

    const getData1 = () => {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: '/xx',
                success: (res) => {
                    resolve(res)
                },
                error: (res) => {
                    reject(res)
                }
            })
        })
    }

    const getData2 = () => {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: '/xx',
                success: (res) => {
                    resolve(res)
                },
                error: (res) => {
                    reject(res)
                }
            })
        })
    }

    getData1()
        .then((res) => {
            if(res.success) {
                return getData2()
            } else {
                return Promise.reject('getData1不成功')
            }
        })
        .then((res) => {
            if(res.success) {
                // todo
            } else {
                return Promise.reject('getData2不成功')
            }
        })
        .catch((err) => {
            alert(err) // 遇见 reject就会到catch
        })

这样，异步操作就行程一个链式操作，没有回调那么深层的嵌套，感觉棒棒哒。

假若其中业务发生了变化，只需要添加、删除”then链条”上的节点就好了。

保证每个then里面都返回一个 Promise 对象，就可以不断地then下去。同时也统一处理了出错、报错。

有时候我们并不需要单独引入一个 Promise 库，可以了解一下jQuery的deferred对象详解

小结

解决异步操作，Promise 并不是唯一的选择，还有很多好玩的东西。

转载请注明：OnlyLing - Web 前端开发者 » 记一次使用Promise