前端企业级代码到底是什么样的？

这篇博客就是想聊聊天，讲讲最近前端学习上发生的一些趣事，以及我的一些经验和感触

我平时学前端全靠B站黑马程序员的网课，但是所有的项目课我都跳过了（因为觉得太费时间），所以学完基础知识就去和同学合作写项目了

今年为了“应付”前端框架大作业，我下载了黑马程序员项目课的一个项目：大事件管理系统

没想到一研究大事件管理系统的代码，才发现我平时写的代码和专业的代码之间差距如此之大

仿佛让我一下子跌入达克效应中“绝望的谷底”

我平时写代码，一个页面一个Vue文件，这个页面的所有结构、样式、逻辑、前后端交互等等所有代码都堆在这个页面的Vue文件里，毫无封装性可言

反观黑马的大事件管理系统，多了两个我写项目从没创建过的文件“utils”和“api”

看代码的过程中我满脑子问号

点开登录页代码，userRegisterService(formModel.value)、userLoginService(formModel.value)

？？？这俩函数是咋回事，也没见定义函数呀？？？

代码划到最上方， 这俩函数是从别的文件里导入的？

于是我又去找api里的user.js

？？？我平时写请求都是用axios.post，这里的request.post是咋回事？？？

代码划到最上方， request也是从别的文件里导入的？

于是我又去找utils里的request

文件里封装了axios，以及请求基地址、请求拦截器及响应拦截器

这下我稍微理解一点了，原来是套娃，A模块中导入了B模块的内容，B模块中又导入了C模块的内容，所以B可以用C的资源，A可以用B的资源

这样把同类型的方法写入一个文件中导出，在需要使用的文件中按需导入，程序的复用性、封装性、可维护性都显著提高，不像我之前写的那“坨”代码……

接着我也对AI提问确认了我的猜想

这段代码之所以能够实现使用request.post、request.get 和request.patch去发起请求，是因为在 user.js 中导入了 request 模块，而 request 模块本身就是一个封装了 axios 实例的模块。由于 axios 实例已经配置了基础地址、超时时间以及请求拦截器和响应拦截器，所以当你在 user.js 中使用 request.post、request.get 或 request.patch 时，实际上是在使用已经配置好的 axios 实例来发送请求。

这种封装的好处在于，它使得你在编写业务逻辑时不需要关心底层的网络请求细节，只需要调用封装好的方法即可。这样提高了代码的可读性和可维护性，并且可以确保整个应用中的网络请求都具有一致的设置和处理逻辑。

如果你之前只学过 axios，那么这种封装其实就是将 axios 的使用进行了进一步的封装和抽象，使得在实际业务中更加方便地使用网络请求功能。希望这能帮助你理解这段代码的工作原理和好处。

天哪，我之前还妄想这个暑假找实习，看来我还是太年轻，前端之路任重而道远呀

项目课还是得上……