JS异步代码单元测试之神奇的Promise

更新时间：2021年05月07日 14:11:44 作者：浅笑·

这篇文章主要介绍了JS异步代码单元测试之神奇的Promise，对异步感兴趣的同学，可以参考下

前言

写这篇文章的起因是在写单元测试时，做形如下测试时

new Promise((resolve, reject) => reject(1)).then().catch(err => {
    console.log(err)
})
async function jestTest () {
    await Promise.resolve().then()
    console.log('这个时候catch预期已经被调用，且输出日志')
}
jestTest()

无法使用await将测试代码恰好阻塞到catch在Event Loop中被调用后的时机，从而检测到catch的执行，通过测试。

而使用“神奇”一词则是因为 promsie 的链式调用中确实有很多默认的 handler 和值的隐含传递。

promise 的链式调用

为了不浪费大家的时间，我们先看一个例子：

Promise.resolve('promise1')
.then(res => {
    console.log('promise1-1 then')
})
.then(res => {
    console.log('promise1-2 then')
})
.then(res => {
    console.log('promise1-3 then')
})
.then(res => {
    console.log('promise1-4 then')
})


Promise.resolve('promise2')
.then(res => {
    console.log('promise2-1 then')
    throw new Error('mock error 1')
})
.then(res => {
    console.log('promise2-2 then')
    throw new Error('mock error 2')
})
.catch(err => {
    console.log(err)
})

如果你答出的上述代码的输出顺序与下述相同，那么你可以跳过这篇文章：

promise1-1 then

promise2-1 then

promise1-2 then

promise1-3 then

Error: mock error 1

promise1-4 then

首先有一个前提，就是你已经知道了，这两个 promise 的 then 的调用是交叉入栈的（从头三行输出也能看出来），如果不清楚这部分内容，可以查阅 Event Loop 的相关文章，同时需要注意的是，在文章所指明的版本中 Chrome 与 NodejsEvent Loop 机制已经相同。

MDN 的错误

我们去翻阅下原本（我做了修改） MDN 关于 catch 的一段描述：

Basically, a promise chain stops if there's an exception, looking down the chain for catch handlers instead.

链式调用在发生异常时会停止，在链上查找 catch 语句来执行。

我最初的误解与此相同，误以为 catch 会直接抓到第一个throw Error，即Error会在promise1-2之后输出，即promise2-2所在的then并不会被加入调用栈。

而通过观察实际的输出结果发现并非如此，那么可以说明 MDN 解释的字面意思应该是错的，链式调用并没有停止，而是执行了我们没看到的东西。

链式的默认处理

这时我们需要知道then的一个默认处理，同样直接引用 MDN 的描述：

If the Promise that then is called on adopts a state (fulfillment or rejection) for which then has no handler, a new Promise is created with no additional handlers, simply adopting the final state of the original Promise on which then was called.

如果你的 promise 的 then 缺少了对应状态处理的回调，那么 then 会自动生成一个接受此 promise 状态的 promise，即 then 会返回一个状态引用相同的 promsie，交给后续的调用。

那么上述代码中的第二个 promise 部分就等效于

Promise.resolve('promise2')
.then(res => {
    console.log('promise2-1 then')
    throw new Error('mock error 1')
})
.then(res => {
    console.log('promise2-2 then')
    throw new Error('mock error 2')
// 注意这个 onRejected
}, (err) => {
    return Promise.reject(err)
})
.catch(err => {
    console.log(err)
})

也就是说在输出结果的promise1-2和promise1-3之间是执行了promise2-2所在的then的，也就是说链式调用并没有直接停止，promise2-2所在的then还是被加入了调用栈。而catch并不是直接catch的第一个then抛出的错误，而是这个隐藏的onRejected返回的同样状态的promise。

简写

同理我们需要知道的是，catch(onRejected)是then(undefined, onRejected)的简写，即就算调用链的前置调用没有发生错误，catch也是会进入调用栈而非直接跳过的。

Promise.resolve('promise1')
.then(res => {
    console.log('promise1-1 then')
})
.then(res => {
    console.log('promise1-2 then')
})
.then(res => {
    console.log('promise1-3 then')
})


Promise.resolve('promise2')
.then(res => {
    console.log('promise2-1 then')
})
.catch(err => {
    console.log(err)
})
.then(res => {
    console.log('其实我是 promise2-3 then')
})

async await

首先需要注意的是在文章指明的 NodeJs 和 Chrome 版本中，f(await promise)完全等同于promise.then(f)。

当然，讨论promise的时候，我们也不能抛开async await。虽然两者在 promise 状态为 onResolve 时处理逻辑相同，但错误处理的执行逻辑并不一样，在async await中发生错误时，才是真正的直接跳过后续await的执行

const promiseReject = new Promise((resolve, reject) => {
    reject(new Error('错误'))
})
const promiseResolve1 = new Promise((resolve, reject) => {
    resolve('正确')
})
const promiseResolve2 = new Promise((resolve, reject) => {
    resolve('正确')
})
const promiseResolve3 = new Promise((resolve, reject) => {
    resolve('正确')
})
function demo1 () {
    promiseReject
    .then(() => {
        console.log('1-1')
    })
    .catch(err => {
        console.log('1-2')
    })
}

async function demo2 () {
    try {
        await promiseReject
        await promiseResolve1
        await promiseResolve2
        await promiseResolve3
    } catch (error) {
        console.log('2-1')
    }
}
// 2-1
// 1-2

以上就是JS异步代码单元测试之神奇的Promise的详细内容，更多关于JS异步代码之Promise的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

javascript和jQuery实现网页实时聊天的ajax长轮询
在做网页实时聊天的时候常常需要长轮询，本文由于采用原生的JS及AJAX，所以简单易懂，通过这篇文章就可以建立一个简单的聊天室程序。
2016-07-07
js基础之DOM中元素对象的属性方法详解
下面小编就为大家带来一篇js基础之DOM中元素对象的属性方法详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
深入学习 JavaScript中的函数调用
可能很多人在学习 JavaScript 过程中碰到过函数参数传递方式的迷惑，本着深入的精神，我给大家分享了一篇教程关于javascript中的函数调用知识，感兴趣的朋友一起学习吧
2017-03-03
客户端限制只能上传jpg格式图片的js代码
客户端限制只能上传jpg格式图片的js代码,对用户体验较好，适合网页中只能使用jpg格式图片的情况。
2010-12-12
js页面加载后执行的几种方式小结
在实际应用中往往需要在页面加载完毕之后再去执行相关的js代码，之所以这么操作是有道理的，如果是操作dom元素，如果相关元素没有加载完成，而去执行js代码，可能会导致错误
2020-01-01
浅析JavaScript中严格模式的使用
在ECMAScript5标准中，JavaScript提出了严格模式的概念（Strict Mode），本文就来和大家简单讲讲JavaScript中严格模式的具体使用，感兴趣的可以了解一下
2023-05-05
JS中用三种方式实现导航菜单中的二级下拉菜单
我们在淘宝、搜狐等大型网站上都可以看到使用的一些二级下拉菜单，比如下面这张图片。那么如何实现导航菜单栏中的二级下拉菜单呢？下面小编给大家分享JS中用三种方式实现导航菜单中的二级下拉菜单，感兴趣的朋友一起看看吧
2016-10-10
javascript如何创建对象
这篇文章主要为大家详细介绍了javascript创建对象的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
Aptos SDK交互实现过程详解
这篇文章主要为大家介绍了Aptos SDK交互实现过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
JS字符串的切分用法实例
这篇文章主要介绍了JS字符串的切分的方法,结合实例形式分析了JavaScript使用split针对字符串进行切分与遍历的相关技巧,需要的朋友可以参考下
2016-02-02