mock.js的params传参

### 关于 Mock.js 中 `params` 传参的使用方法 Mock.js 是一款用于前端开发中的数据模拟工具，能够截获 Ajax 请求并返回伪造的数据。当涉及到参数传递时，可以通过解析请求 URL 或者请求体来获取这些参数。 以下是有关 Mock.js 中如何处理 `params` 参数的具体说明以及示例： #### 解析 GET 请求中的查询字符串 对于 GET 请求，通常会通过 URL 的查询字符串形式传递参数。可以利用 JavaScript 正则表达式或者内置的方法提取这些参数。 ```javascript // 定义一个匹配 GET 请求的规则 Mock.mock(/\/api\/getUserInfo/, 'get', function(options) { // 获取完整的 URL 并解析其中的查询参数 const urlParams = options.url.split('?')[1]; // 提取 ? 后面的部分 const params = {}; if (urlParams) { urlParams.split('&').forEach(param => { const [key, value] = param.split('='); params[key] = decodeURIComponent(value); // 转码解码后的值 }); } return Mock.mock({ status: 200, message: '获取用户信息成功', data: { userId: params.userId || '', // 如果有 userId 参数，则赋值给它 username: '@cname' } }); }); ``` 此代码片段展示了如何从 GET 请求中读取名为 `userId` 的查询参数[^3]。 --- #### 处理 POST 请求中的 JSON 数据 如果客户端发送的是 POST 请求，并且携带了 JSON 格式的 body 数据，那么可以直接访问选项对象中的 `body` 属性。 ```javascript // 定义一个匹配 POST 请求的规则 Mock.mock(/\/api\/createUser/, 'post', function(options) { let requestBody; try { requestBody = JSON.parse(options.body); // 将 body 字符串转换成 JS 对象 } catch (e) { return { code: 400, msg: 'Invalid request body format!' }; } return Mock.mock({ status: 201, message: '创建用户成功', data: { id: Math.floor(Math.random() * 1000), // 随机生成 ID name: requestBody.name || '', email: requestBody.email || '' } }); }); ``` 在此例子中，我们假设客户端提交了一个包含用户名 (`name`) 和邮箱地址 (`email`) 的 JSON 对象作为 POST 请求的内容[^4]。 --- #### 统一方式捕获所有类型的参数 无论是 GET 还是 POST 方法，都可以统一采用一种通用的方式来接收所有的输入参数。这需要结合前面提到的技术手段——即分别针对不同 HTTP 动词的特点编写逻辑。 ```javascript // 创建一个辅助函数用来标准化参数收集过程 function extractParameters(options) { const parameters = {}; if (options.method.toLowerCase() === 'get') { const queryString = options.url.split('?')[1]; if (queryString) { queryString.split('&').forEach(pair => { const [k, v] = pair.split('='); parameters[k] = decodeURIComponent(v); }); } } else if (['post', 'put'].includes(options.method.toLowerCase())) { try { Object.assign(parameters, JSON.parse(options.body)); } catch {} } return parameters; } // 应用场景实例化 Mock.mock(/\/api\/updateProfile/, ['post', 'put'], function(opts) { const parsedData = extractParameters(opts); return Mock.mock({ status: 200, message: `${opts.method.toUpperCase()} profile updated successfully.`, result: { fullName: parsedData.fullName ?? '<Not Provided>', age: parseInt(parsedData.age) ?? null } }); }); ``` 这段脚本提供了一种更加灵活的方式去适应多种情况下的需求[^5]。 --- ### 总结 以上介绍了三种主要情况下如何在 Mock.js 中实现对 `params` 参数的有效管理：GET 查询字符串分析、POST Body JSON 抓取以及综合性的解决方案设计思路。每种情形都附带实际操作案例供参考学习。