mockjs在项目中的使用

现在的前端开发，更多的时前是前后端分离，这样可以大大的提高开发的效率和速度。但如果后端的api的实现迟迟没有完成，这样会严重的影响到前端人员的开发效率。这时mockjs就应运而生，mockjs使的前端在开发的过程中，可以先和后端人员约定好api　的格式和返回的数据内容格式。这样前端就可以根据标准通过mockjs模拟出自己需要的数据。实现完全的前后端分离。

具体实现：

一、先通过npm install  mockjs --save来下载mockjs模块。

二、然后在你的项目中创建一个mock.js文件

import Mock  from "mockjs"

Mock.mock('/user/info','get', function(){
    return Mock.mock({
        "name|3":"liuqiang",
        "age|+1":28
    })
})

这里Mock.mock()方法中的第三个参数可以直接使用｛｝模块来表示。可以为对象或用mock规定的rule

三、创建一个api.js的文件实现api 的封装、我这里用的时axios、在这里要将上面创建的mock.js引入

import axios from 'axios';
require('../mock/mock');//这里也可以做个判断　判断是否为开发模式

export const http = {
    apiget(url){
        return new Promise((resolve,reject)=>{
            axios.get(url).then(function(data){
                resolve(data);
            })
        })
    }
}

四、在直接使用api实现数据的模拟

import React, { Component} from 'react';
import {http} from '../api/http'
export default class Test extends Component{
    constructor(props, context){
        super(props, context);
        this.state={
            type:"test"
        }
        this.testapi = this.testapi.bind(this);
    };
    componentDidMount(){
        console.log(this.context.test)
    }
    testapi(){
        console.log('api')
        http.apiget('/user/info').then(
            function(data){
                
                console.log(typeof(data.data))
            }
        )
    }
    render(){
        return(
            <h1>
                <select name="" id="" onClick={()=>{this.props.changetest('test')}}>
                    <option value="aa1">aa1</option>
                    <option value="bb1">bb1</option>
                </select>
                {this.state.type}
                <input type="button" value="click" onClick={this.testapi}/>
            </h1>
        )
    }
}

后台打印的结果：

{data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}

config:{adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}

data:{name: "liuqiangliuqiangliuqiang", age: 28}

headers:{}

request:MockXMLHttpRequest {custom: {…}, match: true, readyState: 4, timeout: 0, onreadystatechange: ƒ, …}

status:200

statusText:"OK"

__proto__:Object