「SDUDOC」前端网络请求 接口同步与类型定义

SDUDOC实训记录 山东大学创新实训记录

设计背景

将网络请求抽离成单独模块的目的在于登录态的管理和错误的统一处理。
由于后端使用jwt的鉴权方式，需要在HTTP请求头中加入Authorization字段，并有着自己的有效期和超时刷新逻辑。
此外，后端接口繁多，入参和返回数据都需要按照文档指定格式请求。有必要根据接口文档维护一份带类型定义的前端请求list，与后端保持同步。
结合项目实际情况，我使用Rapper进行swagger接口同步，并抽离为services前端请求模块。使用rap2进行维护，它是 TypeScript 的最佳拍档，可以帮我生成具有类型定义的请求方案。
这样设计和编码，有以下好处：

• 无需自行书写请求代码，把 HTTP 接口当做函数调用
• 请求参数/返回数据类型化，静态校验、自动补全快到飞起
• 对 React/Redux 特别优化，提供全局数据方案，hooks 轻松使用

实现与使用

1. 首先在rap2官网上新建项目http://rap2.taobao.org/repository/editor?id=302425，导入后端swagger接口文档http://49.232.151.28:9201/doc.htm

2. 前端项目中安装依赖rap：npm i rap

3. 给 package.json 的 scripts 对象下添加下面一行脚本
   "rapper": "rapper --type normal --rapperPath \"src/services\" --apiUrl \"http://rap2api.taobao.org/repository/get?id=302425&token=9R9z6QerB2pJBOy_iCk_-li78WEChbnM\" --rapUrl \"http://rap2.taobao.org\""

4. 运行 rapper ，同步生成请求类型定义npm run rapper

5. 编写src/services/customFetch.ts，使用axios重写请求方法，为本项目所有请求添加Authorization头，并配置baseURL为Mock源或线上源：

import mobxStore from '@/mobxStore';
import axios, {