到不了的承诺,内附demo(promise/async/await)

最新推荐文章于 2024-08-14 14:35:58 发布

weixin_34367257

最新推荐文章于 2024-08-14 14:35:58 发布

阅读量94

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b3f3bcae51d4519086929c5

本文通过几个有趣例子探讨Promise的特性和使用技巧，包括无限递归的Promise、无法到达的状态及错误处理方式，帮助读者深入理解Promise的工作原理。

看多了写的promise/async正面使用的文章，下面介绍几种Promise特性带来的几个有趣的例子。有点像物理实验里的永动机。。

promise之永远也到不了的地方

无穷无尽的promise

下面这个例子，是因为resolve回调函数的参数是promise实例(下文简称N)，状态就转移到了N上，直到N状态改变，timeout的resolve回调函数才执行回调

这里也看出了promise使用的一个弊端，就是执行后，无法取消。

此处是Demo

let i = 1
function timeout() {
    let ms = Math.random() * 10 * 1000
    return new Promise(resolve => {
        setTimeout(function () {
            console.log(`${i++} revoke of ${ms}`)
            resolve(timeout())
        }, ms)
    })
}

timeout().then(ms => {
    console.log('来到这里是不可以的，这辈子都不可能的')
})
复制代码

让她回来吧

// Sorry, promise执行后，就无法取消了
复制代码

没有resolved的promise

下面直接一个promise，并reject，发现async函数的then是不会执行的

async function waitless () {
    return await Promise.reject(new Error('err'))
}

waitless().then(res => {
    console.log('来到这里是不可以的，这辈子都不可能的')
})
复制代码

让她回来吧，自身捕获

promise自身捕获，从而不影响await的后续执行

async function hava_a_catch() {
    return await Promise.reject(new Error('err')).catch(e => e)
}
have_a_catch().then(res => {
    console.log(res) // => undefined
})
复制代码

调用方使用catch捕获

async function waitless() {
    return await Promise.reject(new Error('err'))
}
waitless().then(res => {
    console.log('我在这里孤怜怜的等着，直到世界尽头...')
}).catch(e => {
    console.log('恩，我在这里输出了')
})
复制代码

The end

以上都是看阮老师《ES6入门》，然后总结出来的。然后果然是promise的使用上是不难的，就是错误获取有点绕。特别是promise.then返回的是一个新的promise，promise.catch返回的也是新的promise。catch之后，这个新的promise的状态就是干净的了 promise还可以链式调用，最后一个catch可以捕获前面所有的错误。再加上promise可以吃掉内部的报错，不影响JS的执行。还有Promise.all的调用，好几个promise执行，其中一个reject了怎么办，在哪个地方捕获，最好的方案是子promise自身捕获，还是all回调捕获呢？其实这个是要根据场景来的。

总之，阮老师的教程里都有讲到，大家细心、耐心的看下去就肯定可以了解到promise设计的是有多周到了

参考：

async函数：async

promise函数：promise