最新消息:看到那些跳动的图片、文字了吗?点击点击 O(∩_∩)O~~

记一次使用Promise

若思若想 onlyling 2950浏览

前言

还不知道 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