vue-element-admin icon indicating copy to clipboard operation
vue-element-admin copied to clipboard

mock-server 中尝试 设置 timeout 启动报错

Open dadazhouRenee opened this issue 3 years ago • 6 comments

拉了最新的代码 然后尝试设置一下Mock的timeout 重新启动报错 不知道为啥 有没有大佬可以解释一下吗?

mock-server.js最新代码 只在 require 后面 添加了 setup

const chokidar = require('chokidar')
const bodyParser = require('body-parser')
const chalk = require('chalk')
const path = require('path')
const Mock = require('mockjs')

// 只添加了这里
Mock.setup({
  timeout: '200-600'
})

const mockDir = path.join(process.cwd(), 'mock')

下方是报错信息:

Error loading D:\学习\Vue\vue-element-admin\vue.config.js:
 ERROR  TypeError: Cannot read property 'setup' of undefined
TypeError: Cannot read property 'setup' of undefined
    at Object.setup (D:\学习\Vue\vue-element-admin\node_modules\[email protected]@mockjs\dist\mock.js:83:21)
    at Object.<anonymous> (D:\学习\Vue\vue-element-admin\mock\mock-server.js:7:6)
    at Module._compile (internal/modules/cjs/loader.js:1200:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
    at Module.load (internal/modules/cjs/loader.js:1049:32)
    at Function.Module._load (internal/modules/cjs/loader.js:937:14)
    at Module.require (internal/modules/cjs/loader.js:1089:19)
    at require (internal/modules/cjs/helpers.js:73:18)
    at Object.<anonymous> (D:\学习\Vue\vue-element-admin\vue.config.js:39:13)
    at Module._compile (internal/modules/cjs/loader.js:1200:30)

dadazhouRenee avatar Jul 06 '20 08:07 dadazhouRenee

此处是在服务端使用mockjs,不可以使用 setup 方法

lavyun avatar Jul 08 '20 17:07 lavyun

@lavyun 好的 那请问一下 如果我想设置我模拟接口的响应时间 有什么方法吗

dadazhouRenee avatar Jul 09 '20 01:07 dadazhouRenee

如果只是想模拟一下延迟,你可以 response => { const res = response.data

setTimeout(() => {
  // if the custom code is not 20000, it is judged as an error.
  if (res.code !== 20000) {
    Message({
      message: res.message || 'Error',
      type: 'error',
      duration: 5 * 1000
    })

    // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
    if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
      // to re-login
      MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
        confirmButtonText: 'Re-Login',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(() => {
        store.dispatch('user/resetToken').then(() => {
          location.reload()
        })
      })
    }
    return Promise.reject(new Error(res.message || 'Error'))
  } else {
    return res
  }  
}, 2000)

},

request.js axios返回结果的时候加个延迟就行

dingangang avatar Jul 09 '20 14:07 dingangang

@dingangang 如果这样的话 因为setTimeout会导致后面接口请求的获取不到返回值 比如请求login接口 拿到的response 是undefined

dadazhouRenee avatar Jul 10 '20 02:07 dadazhouRenee

后来尝试在mock-server.js中的 responseFake函数中添加延迟可以实现

// for mock server
const responseFake = (url, type, respond) => {
  return {
    url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`),
    type: type || 'get',
    response(req, res) {
      console.log('request invoke:' + req.path)
      // 这里setTimeout 是为了模拟延迟 观察全局loading组件
      setTimeout(function() {
        res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
      }, 3000)
    }
  }
}

dadazhouRenee avatar Jul 16 '20 03:07 dadazhouRenee

如果想要每次请求都是随机等待,可以在setTimeout中用自调函数

function randomInRange(min, max) {
  const differ = max - min;
  return Math.trunc(min + differ * Math.random());
}

setTimeout(
        () => {
          res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond));
        },
        (function () {
          return randomInRange(200, 5000); // 注意最大值不能超过 request.js 中设置的最长等待时间
        })()
      );

sws797 avatar Jul 13 '22 09:07 sws797