PanJiaChen / vue-element-admin

:tada: A magical vue admin https://panjiachen.github.io/vue-element-admin
MIT License
87.98k stars 30.47k forks source link

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

Open dadazhouRenee opened 4 years ago

dadazhouRenee commented 4 years ago

拉了最新的代码 然后尝试设置一下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\_mockjs@1.0.1-beta3@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)
lavyun commented 4 years ago

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

dadazhouRenee commented 4 years ago

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

dingangang commented 4 years ago

如果只是想模拟一下延迟,你可以 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返回结果的时候加个延迟就行

dadazhouRenee commented 4 years ago

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

dadazhouRenee commented 4 years ago

后来尝试在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)
    }
  }
}
sws797 commented 2 years ago

如果想要每次请求都是随机等待,可以在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 中设置的最长等待时间
        })()
      );