数据mock

如何mock api请求

如果需要mock多个域名的api请参见api多域名mock。

1、 使用内置网络请求接口发起网络请求。例如：

  1. import cml from "chameleon-api";
  2. cml.get({
  3.   url: '/api/getdriver'
  4. })
  5. .then(res => {
  6.   cml.showToast({
  7.     message: JSON.stringify(res),
  8.     duration: 2000
  9.   })
  10. }, 
  11. err => {
  12.   cml.showToast({
  13.     message: JSON.stringify(err),
  14.     duration: 2000
  15.   })
  16. });

调用方法的参数url中只需要写api的路径。那么本地dev开发模式如何mock这个api请求以及build线上模式如何请求线上地址，就需要在配置文件中配置apiPrefix。

2、 配置apiPrefix dev开发模式和build模式配置的apiPrefix会拼接到网络请求的url前，dev模式不配置时，默认为当前启动web服务的ip+端口。上面的例子中如果本地ip为198.168.1.1 启动端口为8000。dev模式发起的网络请求为198.168.1.1:8000/api/getdriver, build模式发起的网络请求为http://api.chameleon.com/api/getdriver。

  1. // 设置api请求前缀
  2. const apiPrefix = 'http://api.chameleon.com';
  3. cml.config.merge({
  4.   wx: {
  5.     dev: {
  6.     },
  7.     build: {
  8.       apiPrefix
  9.     }
  10.   }
  11. })

3、 配置本地mock数据

前两步操作实现了网络请求dev模式请求本地，build模式请求线上，这一步就讲解如何mock本地请求数据。

在/mock/api/文件夹下创建mock数据的js文件。文件内容格式如下：

  1. module.exports = [
  2.   {
  3.     method: 'get',
  4.     path: '/api/getdriver',
  5.     controller:  function (req, res, next) {
  6.       console.log('/api/driver/getList')
  7.         res.json({
  8.           total: 100,
  9.           driverList: []
  10.         });
  11.     },
  12.   }
  13. ]
  • method指定请求方法，默认值['get','post']
  • path指定请求的路径
  • controller 是express的中间件形式，在中间件中可以做任何操作最后调用res的方法返回结果。
    启动dev模式后，通过ip+端口+path即可访问配置的api请求。结合上面讲到的网络请求方法，即可实现本地的api数据mock。

【扩展】如何在本地dev模式请求线上数据？

可以在mock文件的controller中请求对应的线上数据，例如可以使用request模块实现请求。

如何mock php模板下发数据

/mock/template/文件夹下存放的php文件是下发的模板数据，php文件内将下发的数据赋值给$chameleon对象，例如：

  1. <?php
  2.   $chameleon = array(
  3.     "errno" => 0,
  4.     "errmsg" => "",
  5.     "pageData" => array(
  6.       "pageInfo" => array(
  7.         "title" => "chameleon",
  8.         "content" => "chameleon跨端"
  9.       )
  10.     )
  11.   );
  12. ?>

在模板中通过变量pageData,errno,errmsg接收。

  1.   <script>
  2.   var pageData = {json_encode($pageData)}
  3.   var errno = {json_encode($errno)}
  4.   var errmsg = {json_encode($errmsg)}
  5.   </script>

同时还模拟了与模板下发的pageData相同的ajax请求，只需在当前访问页面的url上添加puredata=1参数。

  1. {
  2.   errno: 0,
  3.   errmsg: '',
  4.   pageData: {
  5.     pageInfo: {
  6.       title: 'chameleon',
  7.       content: 'chameleon跨端'
  8.     }
  9.   }
  10. }