WebApp【公共组件库】@前端(For Git Submodule)
Tevin
2025-03-03 b0b8d5b0fb654dacad0636b47927640874ddfe22
知识库文档,新增常用基类
1 files added
2 files renamed
144 ■■■■■ changed files
_knowledges/101-项目介绍.md 2 ●●●●● patch | view | raw | blame | history
_knowledges/102-项目规范.md patch | view | raw | blame | history
_knowledges/201-常用基类.md 142 ●●●●● patch | view | raw | blame | history
_knowledges/101-项目介绍.md
File was renamed from _knowledges/01-项目介绍.md
@@ -319,6 +319,8 @@
}
```
说明:请求异常由请求层的基类自动处理,数据控制层跳过错误的逻辑,只处理成功
#### 空白请求层示例
```js
_knowledges/102-项目规范.md
_knowledges/201-常用基类.md
New file
@@ -0,0 +1,142 @@
# 常用基类
## 请求层基类 Fetcher.js
类 Fetcher 是一个用于处理 HTTP 请求的工具类,包含了多种方法来简化和统一请求的处理
### 引用方法
```js
import {
    Fetcher
} from '@components/bases/Fetcher';
```
### 构造函数
构造函数接受一个配置对象 options 作为参数,包含如下属性
| 属性 | 类型 | 必填 | 描述 | 默认值 |
|---|---|---|---|---|
| urlPrefix | array | 是 | 请求URL的前缀 | ['/api/common/', '/api/common/']  |
说明:
* urlPrefix数组包含两项,第一项为本地Mock的URL前缀,第二项为服务器接口的前缀,二者可以不一样
```js
class FCommon extends Fetcher {
    // 构造函数示例
    constructor() {
        super({
            urlPrefix: ['/api/order/', '/mini/order/'],
        });
    }
}
```
### 主要方法
```js
/**
 * 拼写 URL 地址
 * @param {String} devSuffix - 开发环境URL后缀
 * @param {String} serSuffix - 服务器环境URL后缀
 * @return {String} 拼接后的 URL 地址(不含域名)
 */
spellURL(devSuffix, serSuffix) {}
/**
 * 发送 POST 请求,query 的简写
 * @param {String} url - 请求的 URL
 * @param {*} data - 请求参数
 * @param {Object} [options] - 请求选项
 * @return {Promise<any>} 返回一个 Promise 对象,解析为响应数据
 */
post(url, data, options = {}) {}
/**
 * 基础 AJAX 请求
 * @param {String} type - 请求类型(GET 或 POST)。
 * @param {String} url - 请求的 URL。
 * @param {*} [data] - 请求参数。
 * @param {Object} [options] - 请求选项。
 * @return {Promise<any>} 返回一个 Promise 对象,解析为响应数据。
 */
query(type, url, data = null, options = {}) {}
/**
 * 下划线字符串转小驼峰
 * @param {String} str - 下划线字符串
 * @return {String} 转换后的驼峰字符串
 */
stringToCamel(str) {}
/**
 * 小驼峰字符串转下划线
 * @param {String} str - 小驼峰字符串
 * @return {String} 转换后的下划线字符串
 */
stringToUnderline(str) {}
/**
 * 驼峰与下划线命名模式转换
 * @param {String} type - 'camel' 或 'underline'
 * @param {Object} json - JSON 对象
 * @return {Object} 转换后的 JSON 对象
 */
transKeyName(type, json) {}
```
说明:
* spellURL:拼接URL时,会根据是否处于 mock 模式来选择不同的 URL 前缀(本地开发自动使用 mock 模式)
* query:如果在小程序中,会自动存取 cookies
### 响应处理
#### 处理流程
1. query 方法调用 Taro.request 发送请求
2. 收到响应后,先检测响应数据格式,发现其他类型的响应格式时,会自动转换为:前端统一响应数据格式
3. 根据响应格式,如果成功,回传递响应内容进数据控制层,如果失败,直接失败提示
#### 前端统一响应数据格式
格式如下:
```
{
    state: { // 状态
        code, // 状态码
        msg // 状态消息
    },
    data: { // 实际数据,必须是 Object
    }
}
```
例如:
```json
{
    "state": {
        "code": 2000,
        "msg": "OK"
    },
    "data": {
        "id": 1,
        "name": "Tevin"
    }
}
```
注意,为了保证接口数据的扩展性,data 只能接 Object 类型,禁止接其他类型
#### 前端统一响应状态码
| 状态码 | 意义 |
|---|---|
| 2000  | 通用请求成功 |
| 2001  | 请求成功,但是没有数据,弹窗提示 msg(仅特殊情况使用) |
| 5000  | 通用请求失败,弹窗提示 msg |
| 9001  | 登录已过期,返回登录页 |
| 9002  | 已登录但没有操作权限,弹窗提示 msg |