npm 包 `generator-ynu-api` 使用教程

阅读时长 4 分钟读完

引言

在开发前端项目时,我们经常需要与后端服务器进行交互。这时我们需要接口来传递数据。接口的开发一般由后端工程师来完成,前端工程师则需要将后端开发好的接口进行调用,这就需要前端工程师对接口进行封装。

接口封装不仅可以提高前端工程师的开发效率,也能减少代码重复度,提高代码可读性和可维护性。而在我们日常的开发中,很多公司和开源组织都从这个需求出发,封装了很多优秀的接口库,比如 axiosfetchjQuery.ajax 等等。但是在项目开发中,即使使用这些库,我们还是需要自己针对实际项目对接口进行一定的封装。这个过程相对繁琐、重复,也有可能出现一些错误。

为了解决这个问题,generator-ynu-api 应运而生,它可以生成封装接口所需的常用文件(如 serviceinterface 等),减少开发量,提高代码质量。

generator-ynu-api 简介

generator-ynu-api 是一个在 Yeoman 框架下生成基于 Vue.js 项目的 API 请求代码的命令行工具。

使用前提

  1. 安装 Node.jsnpm
  2. 全局安装 Yeomannpm install -g yo
  3. 全局安装 generator-ynu-apinpm install -g generator-ynu-api

安装

打开终端并进入到你的项目文件夹中,输入以下命令:

按照提示执行即可。

使用方法

当你完成了安装后,执行上述命令后,脚手架就会生成以下文件:

-- -------------------- ---- -------
-- -----
    --- ---
    -   --- --------
    -   --- ---------
    -   --- --------------
    --- -------
    -   --- --------------
    --- ----
    -   --- -------
    --- -----
        --- -------

其中:

  • api/index.ts:批量导出请求方法的模块。
  • api/config.ts:请求配置文件,包含 baseURL、请求头 header 等信息。
  • api/interceptor.ts:请求拦截器,可以进行统一的错误处理或者状态判断等。
  • service/UserService.ts:某一业务下的请求方法类,封装了具体的 AJAX 请求。开发者可以通过继承该类并实现具体请求方法,来对请求做个性化适配以及请求拦截等操作。
  • mock/user.ts:mock 数据文件,包含用户的原始信息和请求接口返回数据的解析规则。
  • types/user.tstypescript 接口或类的定义,为开发者在开发过程中提供更好的代码提示。

接下来,你只需针对这些文件进行一些配置和修改,就可以完成一些基础的请求了。同时,你也可以根据自己的项目需求进行更深度的设置和开发。

示例代码

以下为对 UserService.ts 文件进行个性化封装后的示例代码:

-- -------------------- ---- -------
------ ------- ---- ---------
------ - ------------ - ---- --------
------ - --------- - ---- ----------------

----- ------- - ----
----- ---------------- - ---

------ ------- ----- ----------- -
  ------ ---------------- ----- ----------------------- -
    ----- --- - ------------
    ------ -------
      ---------- -------
      ----------- -- -
        -- -------------- --- -------- -
          ------ --------------
        - ---- -
          -- ---------------------
          ------ ----------------
            ----- --------------
            -------- -----------------
          ---
        -
      --
      ------------ -- -
        -- ---------------------
        ------ ----------------
          ----- -----------------
          -------- -------------
        ---
      ---
  -
-

此处,我们添加了网络上和业务上的错误处理,当请求数据出现对应的异常时,我们可以统一在此处进行处理并向其他函数提供更好的返回值。此外,需要在 User 类中添加具体的方法,用于向服务器端发起请求。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005663081e8991b448e2184

纠错
反馈