记一次使用Promise

3,263次阅读

共计 1282 个字符，预计需要花费 4 分钟才能阅读完成。

前言

还不知道 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 对象详解