New file |
| | |
| | | # 常用基类 |
| | | |
| | | ## 请求层基类 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 | |