在模块化开发中如何使用mock模拟数据

使用步骤

1.安装并导入mock模块
2.安装并导入axios-mock-adapter
3.安装axios

1.在项目中创建一个mock文件

import axios from "axios"
import MockAdapter from "axios-mock-adapter"
5.创建api文件夹将所有的请求都写在这里统一处理
import {get,post} from "./common"; 
let base = "";
export const requestData = function (params){
	return post(`${base}/getDataContainer`,params).then(res => {
			 res.data
		})
}

2.在mock文件下创建一个data目录,新建data.js(用于存放mock的数据)

import Mock from "Mock.js"
const data_container = [];
for(let i = 0; i < 3; i ++){
	data_container .push(Mock.mock({
		element:i,
		id:i*2,
	}))
}

3.在mock文件夹下的index.js文件夹下导入数据

import data_container  from "./data/data.js"

4.封装一个拦截的方法,在入口的地方调用

export default {
	bootstrap(){
		let mock = new MockAdatpter(axios);
		mock.onGet("/success").reply(200,{
			msg:"success"
		})
		mock.onGet("/error").reply(200,{
			msg:"success"
		})
		//模拟接口,导入数据
        mock.onGet("./getDataContainer  ").reply(config => {
            return new Promise((resolve,reject) => {
                setTimeout(() => {
                    resolve([200,{
                        code:200,
                        data:data_container  
                    }])
                })
            })
        })
	}
}
封装好后在入口文件中
import Mock from "../mock";(导入文件)
Mock.bootsrtap()

6.对后台数据进行统一的封装,即对步骤5中get,post

import axios from "axios"
axios.default.withCredentials = true;
export function get(url,params){
	return axios({
		method:"get",
		url:url,
		params:params,
		headers:{
				"Content-Type":"application/json"
			},
	})
	.then(res => {
		console.log("success!!!")
		return parseResult(res)
	})
	.catch(res => {
		alert("服务器错误")
	})
}
function parseResult(res){
	if(res.status === 200){
		return Promise.resolve(res.data)
	}else if(res.data.error_code  !=== 0){
		return Promise.reject(res.data)
	}
}