热更新和参数问题

[kenixFog]

1、环境：v0.4.0 + vue 2.7.14 + vite 4.1.3
2、问题
1）开发环境，修改***.mock.ts文件接口数据，好像无法热更新
2）是否可支持属性同义词配置，比如，axios中 params 表示 url后的参数，data表示body体的参数，但实际mock接口接收后，query、params、body无法对应，是否可支持同义词配置？alias : { body：'data', query: 'params'}

[pengzhanbo]

1. 重新进行了自测，热更新是有效的，修改后接口重新返回的数据有更新。

   接口数据的热更新是体现在重新发起请求后获取的数据，由于接口请求热更新的局限性，很难实现mock.ts文件更新后自动让客户端重新发起请求，所以在不同场景下，可能需要开发者手动刷新页面，或者进行其他触发二次请求的操作。
   关于这一点，我可以实现一个新的 reload option，让开发者决定 mock 更新是否强制刷新客户端以重新发起请求。

2. mock 配置中的 query，params，body，没有与 axios 中的 params，data 对应，是由于 插件对 url 的解析方式支持两种模式：

   • { url: '/api/list' } ，这种模式下， url 是一个静态的配置
   • { url: '/api/post/:postId' }, 这种模式下， url 是一个动态路由匹配， 既可以命中 /api/post/1, 也可以命中 /api/post/2

   在这两种模式下，url 均可以带上查询参数，如： /api/list?page=2， /api/post/1?type=2。 为了能够加以区分，提取出 url 中包含的两种携带的数据，插件选择了将 ?page=2，?type=2 这部分 queryString 解析为 query, 而 /api/post/:postId的动态路由匹配，则解析为 params ，即 { postId: 1 }。这样做可以避免冲突，也更好理解。

   同时插件考虑是支持通过各种方式发起的请求，包括但不限于 axios，所以主要考虑的是 遵循 http协议的规范。

   添加同义词配置我认为没有意义，反而会增加理解成本，而且还会导致 defineMock 提供的类型帮助失效。

[kenixFog]

1、可能是我本地环境问题，有空再试一下
2、第二个，怎么说呢~~目前实际开发过程中，想达到一个url请求，比如设定以mock开头的，是有可能要走mock的接口，但实际是否启用mock，是结合开发和测试环境的其它环境变量参数进行控制的，也就是一个定义的url是根据配置最终处理成执行时的url，从而适配开发+mock接口、开发+后端接口，测试+mock接口，测试+后端接口4种情况，如果选择以axios的方式，现在的插件是无法获取到相应的参数的，而传参的格式必须是根据插件规定的方式来，相当于需要针对mock接口对参数进行特殊处理，至于其它方式发请求，还没尝试。感觉如果要更加灵活，达到支持各种方式发起的请求（至少目前axios请求的参数拿不到，应该算是不支持哈），增加同义词，相比较只能按照http规范来，不失为一种可以考虑的手段~

[pengzhanbo]

我这边管理的项目中，也有包括使用 axios ， fetch， 以及包括在小程序中的，使用axios库以及其他库没有发现问题，可否给出你这边使用 axios 和 mock 的相关代码示例？

[kenixFog]

1、请大佬检阅~~
环境，v0.4.0 + vue 2.7.14 + vite 4.1.3 + Axios 1.3.3 + typescript 4.9.5，
2、vite.config.ts中插件的配置

import { resolve } from 'path'
import mockDevServerPlugin from 'vite-plugin-mock-dev-server'

export function initMockDevServerPlugin() {
  return mockDevServerPlugin({
    prefix: 'mock',
    include: 'mock/**/*.mock.{ts,js,cjs,mjs,json,json5}',
    formidableOptions: {
      // 配置上传资源存放目录
      uploadDir: resolve(process.cwd(), 'uploads'),
      // 可修改上传资源名称
      filename: (name, ext, part) => {
        return part.originalFilename!
      },
    },
    build: {
      serverPort: 6666,
      dist: 'mockServer',
    },
  })
}

3、api.mock.ts:

import { defineMock } from 'vite-plugin-mock-dev-server'
export default defineMock([
  {
    url: '/mock/caseCache/getData',
    body: (res, query, params, body) => {
      console.log(res)
      return {
        data: {
          query,
          params,
          body,
          isLogin: true,
        },
        message: '成功',
        code: '200',
      }
    },
  },
])

4、请求接口

import { request } from '@/utils/request'

const url = {
  getData: '/mock/proxyTest/caseCache/getData',
}

export function ApiGetSectionData(params, data): Promise<Jsonable> {
  return request.get<Jsonable>(
    {
      params,
      data,
      url: url.getData,
    },
    {
      requireAuth: false,
      messageMode: 'message',
      actionType: 'query',
    },
  )
}

ps:
1） url会根据配置，自动移除mock，或者proxyTest
2） params和data，对应axios中AxiosRequestConfig接口的params和data类型

export interface AxiosRequestConfig<D = any> {
  url?: string;
  method?: Method | string;
  baseURL?: string;
  transformRequest?: AxiosRequestTransformer | AxiosRequestTransformer[];
  transformResponse?: AxiosResponseTransformer | AxiosResponseTransformer[];
  headers?: (RawAxiosRequestHeaders & MethodsHeaders) | AxiosHeaders;
  params?: any;
  paramsSerializer?: ParamsSerializerOptions;
  data?: D;
  timeout?: Milliseconds;
  ……

5、实际请求

const querySection = async () => {
  const data = await ApiGetSectionData(
    {
      name: 1234,
      date1:
      DateUtil.getDateTime(),
    },
    {
      date2: DateUtil.getDateTime(),
    },
  )
  console.log(data)
}

6、请求结果

如果图片无法加载，可以浏览器访问这个地址，https://imgse.com/i/pSxojHA

7、另外好像热更新。。。我这边就是不行。。mock接口中，isLogin改为false。。刷新页面。返回值依旧是true。。

[pengzhanbo]

3、api.mock.ts:

import { defineMock } from 'vite-plugin-mock-dev-server'
export default defineMock([
 {
   url: '/mock/caseCache/getData',
   body: (res, query, params, body) => {   ❌
     console.log(res)
     return {
       data: {
       query,
         params,
         body,
         isLogin: true,
       },
       message: '成功',
       code: '200',
     }
   },
 },
])

这里有一个错误: method body 只接收一个参数 resquest, query, params, body 是 resquest 参数的属性，可以通过解构语法获取：

{
  body: (resquest) => {
    const { query, params, body } = request
  }
}

{
  body: ({ query, params, body }) => {
    
  }
}

---

6、请求结果

从截图中我看到的有两个问题点， 一个是 响应体中的 body 为 undefined ，一个是反馈的 isLogin 没有更新。

问题1产生的原因是 request.headers['content-type'] 值为 application/json;charset:UTF-8 导致内部未能匹配到跳过了解析，这个是 插件bug，我会进行修复；
问题2产生的原因，目前排查到的原因， 是由于在 windows环境下的 posix 为 \\， 导致了热更新时查找文件模块进行重写时出现了匹配错误，我会在下个版本中一并修复。

感谢反馈 bug ！

[pengzhanbo]

以上发现的问题已在 v0.4.2 版本中修复，升级插件版本即可。

[kenixFog]

以上发现的问题已在 v0.4.2 版本中修复，升级插件版本即可。

上面的问题，都已经解决~~

遇到个新"问题"，但是不晓得能不能从插件层面进行容错~~

body: (res, query, params, body) => {   ❌

这个修改的时候，我改错了，我写成了

(body: (res,  {query, params, body} ) => {)

然后导致程序直接退出

E:\0WorkSpace\app\mock\api.mock.ts:30
    body: (res, { query, params, body }) => {
                  ^

TypeError: Cannot destructure property 'query' of 'undefined' as it is undefined.
    at Object.body (E:\0WorkSpace\app\mock\api.mock.ts:30:19)
    at E:\0WorkSpace\app\node_modules\.pnpm\vite-plugin-mock-dev-server@0.4.2_vite@4.1.4\node_modules\vite-plugin-mock-dev-server\dist\index.cjs:456:34
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Node.js v19.6.0
 ELIFECYCLE  Command failed with exit code 1.

这个写法肯定有问题，但万一手抖，改错了。。重新启动，时间成本略微有点高~

[pengzhanbo]

@kenixFog 我将这个新问题转移到新的 issue #17 。