mock在vue脚手架里面的使用

Mock.js

一般用于阻断前端的请求，该模块会为前端的请求返回一个模拟的数据，前端是真正请求不到后端的。

使用

安装

npm i mockjs

使用步骤

1.在src文件夹下创建一个mock文件，
2.在mock文件下的创建模拟的数据 .json文件
3.创建mock服务器，即mockServe.js文件，
4.在入口文件main.js里面引入mockServe.js文件 import
5.在api里面配置mock请求
6.在要使用该请求的组件里面引入该api暴露的方法
	import { reqDataList } from '@/api/index'
	之间使用 let res = await reqDataList()即可

创建文件

创键json文件

注意，在json文件就是模拟的数据，里面使用的图片都是成为静态资源，我们要把json文件里面使用的图片资源放在pubilc目录下

创建mockServe文件

1.引入json文件以及mock
	impor Mock from 'mockjs'
2.引入json模拟的数据
	import data from './data.json'
2. 使用mock方法发送数据
	Mock.mock('请求的地址'，请求返回的数据)
	Mock.mock('mock/data'，{code:200,data:data})

配置api

1.在api文件里面创建一个mockAjax.js文件，该文件里面的内容配置基本上与request.js文件一致，注意baseURL写自己的，mockServe里面写的啥就是啥。
例：我在mockServe.js文件里面写的地址是
	Mock.mock('mock/data'，{code:200,data:data})
	那么baseURL里面就是/mock

// axios的二次封装
import axios from 'axios'
import nProgress from 'nprogress';
import 'nprogress/nprogress.css'


const reqmock = axios.create({
  // 配置对象
  baseURL: '/mock', //请求的基础请求路径，
  timeout: 5000, //请求超时的时间

})
// 请求拦截器 --- 在发送请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
reqmock.interceptors.request.use((config) => { // config 是一个配置对象，里面包含了请求头

  // 进度条开始动
  nProgress.start()


  return config;

})

// 响应拦截器  --- 在请求返回之后做一些事情
reqmock.interceptors.response.use((res) => {
  // 成功的回调
  nProgress.done()

  return res.data;
}, (err) => {
  // 失败的回调
  return Promise.reject(new Error('faile')); //终止Promise链
})


export default reqmock;

2.在api文件夹的index.js里面
引入 mockAjax.js文件
创建暴露mock请求
// 发送mock请求
export const reqDataList = () => {
 return mockRequest.get('/data')
}