更新记录

1.0.0（2024-11-07） 下载此版本

实现基本功能

平台兼容性

yk-localapi

由于app无法直接使用mock，所以写了一个本地的方法，用于拦截请求到本地实现。

借用mvc的实现思路，可以用于后端接口没完成或者需要演示数据，但是接口写法又想与后端一致的情况。

可以实现一个路径参数，如：/demo/${id}

文件结构

|- localApi // 主目录
    |- controller // 请求（类似后端controller）
    |- model // 公共对象（返回体）
    |- services // 实现的方法
    index.js // 入口拦截器

使用说明

1. 首先在你的请求方法插入拦截代码

   //示例
   export default (config) => {
   
    /**
     * 在请求之前插入本地的代码
     * 判断是否要走本地请求，拦截请求
     */
    if (config.isLocal) {
      return execController(config.url, config)
    }
   
    const url = config.url;
    const method = config.method || "get";
    const data = config.data || {};
    const header = {
      'Blade-Auth': uni.getStorageSync('token') || '',
      'Content-Type': 'application/json;charset=UTF-8',
      'Authorization': 'Basic c2FiZXI6c2FiZXJfc2VjcmV0',
      ...config.header
    }
    if (method == "post") {
      header = {
        'Content-Type': 'multipart/form-data' // 自定义，跟后台约定好传什么格式的
      };
    }

2. 在请求方法中选择使用本地拦截

   // 引入 request 文件
   import request from './request.js'
   
   // 分页查询学习列表
   export const getDemoList = (params) => {
    return request({
      url: '/demo/page',
      method: 'get',
      data: params,
      isLocal: true, // 设置是否走本地方法(可以存一个列表在 localStorage 里面统一处理)
      header: {} // 自定义
    })
   }
   // 获取学习列表详细信息
   export const getDemoInfo = (id) => {
    return request({
      url: `/demo/${id}`,
      method: 'get',
      isLocal: true, // 设置是否走本地方法
    })
   }

3. 在controller中写入对应的路由和接受方法

   import { PageData, ResData } from "../model/responseData";
   import { getDemoInfo, getDemoList } from "../services/demoService";
   
   // 写好路由
   export default [
    {
      url: '/demo/page',//接口地址
      method: 'get',//接口类型
      endpoint: false,//路径中是否有参数
      response: getPage,//调用的函数
    },
    {
      url: '/demo/id',//接口地址
      method: 'get',
      endpoint: true, // 会根据 /demo判断路径
      response: getInfo,//调用的函数
    }
   ]
   
   async function getPage(query) {
    const list = await getDemoList(query);
    const pageData = new PageData(list, list.length);
    return pageData.getPageData();
   }
   
   async function getInfo(id) {
    const list = await getDemoInfo(id);
    return ResData.success(list);
   }
   

4. 在services中实现对应的数据获取

   1. 可以导入mock，mock不能拦截但是生成数据的方法还是可以使用的
   2. 可以进一步使用 localStorage 存储数据
   3. app可以再进一步使用sqlite存储数据

   export function getDemoList(query) {
    // 模拟异步
    return new Promise((resolve, reject) => {
      const list = new Array(20).fill('').map((_, i) => ({
        name: `a${i + 1}`,
        age: Math.round(Math.random() * 20 + 10)
      }))
   
      resolve(list)
    })
   }
   
   export function getDemoInfo(id) {
    return new Promise((resolve, reject) => {
      resolve({
        name: id,
        age: Math.round(Math.random() * 20 + 10)
      })
    })
   }

5. 在model中自定义要返回的格式