中间件 | koa-compose源码阅读笔记

koa-compose源码阅读笔记

第一次阅读源码有些吃力，之前的时候只是看过，看一眼看不懂就不想看了，这次得到了群里的大佬鼓励，经过一天半的时间，终于把koa-compose50行不到源码看懂理顺了。

下图是根据若川大佬文档，使用测试用例在45行处打上断点，我这变成了63行，因为我上面的代码都做了注释。下面我们开始使用jest测试用例。

按下图操作，代码运行，并且可以看到代码运行到我打断点的地方暂停了。

顶部有五个操作按钮，第一次用这种方式，不知道它们分别代表这什么意思:
按钮1：运行/继续 F5，真正的一步一步运行
按钮2：单步跳过(又叫逐过程) F10，按语句单步执行。当有函数时，不会进入函数。
按钮3：单步调试（又叫逐语句） F11：当有函数时，点击这个按钮，会进入这个函数内。
按钮4：单步跳出 ⇧F11:如果有循环，点击该按钮，会执行到循环外面的语句。
按钮5：重启 ⇧⌘F5。
按钮6：退出debug。

下面是进入compose函数后我做的分析，该函数return一个promise，resolve里面的参数就是我们传到数组的函数，在这调用并传递两个参数。当一个函数调用await next() 触发dispatch.bind(null, i + 1)依次加载直到i我们传递进来的数组长度就会直接resolve（）

下面我们看arr数组的顺序是1，2，3，4，5，6，当时看的时候前面123可以理解，后面为什么456，在我的脑海中在想代码倒着往上执行，不能理解，后来在群友的帮助下，注意到了await，在这之前我也知道await是等待的意思，可能当时蒙圈了把。当await next()执行下面代码等待它执行完在执行，当执行的时候又会进入到数组第二个函数，第二个函数执行到await next()下面代码不会执行，此时第一个函数的await next(）还没执行完后面代码仍在等待，依次类推，到第三个的时候这时候compose 函数有个条件判断 此时 i数组的长度所以直接resolve（）里面没有参数，代码往下执行push（4）这是第一个函数的await next()执行完了开始执行后面的代码push（5），此时第一个await next()执行完了开始执行后面的代码 push（6）。这样就清晰明了了。

总结：第一次读源码，中间读的都想放弃，但是当时就在想我为什么读不明白，所以我就一直在坚持，后面在若川大佬及群友的帮助下，算是完成了第一次读源码任务。也让我学到了很多的基础东西，认识到自己的不足，以后还希望若川大佬多多发布读源码活动，让我们在摸鱼的同时也能学到很多东西。有想加入的欢迎留言哦。