mock(vue-element-admin)

260 阅读1分钟
utils/request.js


import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
// import store from '@/store'

//create an axios instance

const service = axios.create({
	// baseURL:process.env.VUE_APP_BASE_API,
	// withCredentials: false, // 默认的
	timeout: 1000,
})

// request interceptor
service.interceptors.request.use(config =>{
  // do something before request is sent
	// if(store.getters.token) {
    //   // let each request carry token
    //   // ['X-Token'] is a custom headers key
    //   // please modify it according to the actual situation
	// 	config.headers['X-Token'] =getToken()
	// }
	console.log(config)
	return config


}, function (error){
	//对请求错误做些什么
	console.log(error);
	return Promise.reject(error);
})

//response headers
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
  */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
	response=>{
		const res = response.data;
	   // 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
			})

			if(res.code === 50008 || res.code === 50012 || res.code === 50014) {
				//to relogin
				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
		}




	}
)


export default service




index.js

const Mock = require('mockjs')
const { param2Obj } = require('../src/utils')
const menu= require('./menu')


const mocks = [
  ...menu,
]

// for front mock
// please use it cautiously, it will redefine XMLHttpRequest,
// which will cause many of your third-party libraries to be invalidated(like progress event).
function mockXHR() {
  // mock patch
  // https://github.com/nuysoft/Mock/issues/300
  Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
  Mock.XHR.prototype.send = function() {
    if (this.custom.xhr) {
      this.custom.xhr.withCredentials = this.withCredentials || false

      if (this.responseType) {
        this.custom.xhr.responseType = this.responseType
      }
    }
    this.proxy_send(...arguments)
  }

  function XHR2ExpressReqWrap(respond) {
    return function(options) {
      let result = null
      if (respond instanceof Function) {
        const { body, type, url } = options
        // https://expressjs.com/en/4x/api.html#req
        result = respond({
          method: type,
          body: JSON.parse(body),
          query: param2Obj(url)
        })
      } else {
        result = respond
      }
      return Mock.mock(result)
    }
  }

  for (const i of mocks) {
	  console.log(i)
    Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
  }
}

module.exports = {
  mocks,
  mockXHR
}


mock/menu.js


  module.exports = [
	{
		url: '/vue-element-admin/menu',
		type: 'get',
		response: () => {
		  return {
			code: 20000,
			data: '111111111'
		  }
		}
	  },
  ]



api/menu.js

import request from '@/utils/request'

export function getMenu() {
	return request({
	  url: '/vue-element-admin/menu',
	  method: 'get'
	})
  }