react中通过axois和mockjs模拟数据请求

安装mockjs和axios

• yarn add mockjs
• yarn add axios
  mockjs用法参照官方文档

创建mock文件夹并在文件夹下创建mock.js

mock.js

const Mock = require('mockjs')

module.exports = Mock.mock('/user', 'get', options => {
  const ret = Mock.mock({
    'user': { userName: '@cname' }
  })
  return {
    status: 200,
    data: ret
  }
})

创建组件并引用写好的mock.js和axios

Demo.jsx

import React, { Component } from "react";
import axios from "axios";
import '../mock/mock'

export default class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
     
    };
  }

  componentDidMount(){
    axios.get('/user').then(res=>{
      console.log(res.data,'resData');
    })
  }
  
  render() {
    const { treeData } = this.state;
    return (
      <div>
        <h1>123</h1>
        <button></button>
      </div>
    );
  }
}

• log输出结果如图
  
  遇到的问题
• 在mock.js中开始使用的import来引用mockjs即

import Mock from 'mockjs'
module.exports = Mock.mock('/user', 'get', options => {
  const ret = Mock.mock({
    'user': { userName: '@cname' }
  })
  return {
    status: 200,
    data: ret
  }
})

• 页面产生如下报错
  
  产生此错误的原因是通过import引入的，而使用module.exports导出，正确的做法应该是如果想要通过module.exports导出，就应该使用require加载模块，即上面的形式

创建带有参数的请求

mock.js

const Mock = require('mockjs')
module.exports = Mock.mock('/list', 'get', options => {
  console.log(options,'options');
  const page = JSON.parse(options.body).page
  const ret = Mock.mock({
    'list|20': [{ 'id|+1': 1, name: '@cname' }]
  })
  if (page > 3) {
    return {
      status: 200,
      data: []
    }
  }
  return {
    status: 200,
    data: ret
  }
})

Demo.jsx

import React, { Component } from "react";
import axios from "axios";
import "../mock/mock";

export default class LoadTreeSelect extends Component {
  constructor(props) {
    super(props);
    this.state = {
      page: 1,
    };
  }
  getPageList = () => {
    this.setState({ page: this.state.page + 1 }, () => {
      axios
        .get("/list", {
          data: {
            page: this.state.page,
          },
        })
        .then((res) => {
          console.log(res, "reslIist有参数");
        });
    });
  };
  render() {
    const { treeData } = this.state;
    return (
      <div>
        <button onClick={this.getPageList}> 带有参数的请求</button>
      </div>
    );
  }
}

post请求

mock.js

const Mock = require('mockjs')
module.exports = Mock.mock('/add', 'post', options => {
  return {
    status: 200,
    ata: JSON.parse(options.body).data
  }
})

Demo.jsx

import React, { Component } from "react";
import axios from "axios";
import "../mock/mock";

export default class LoadTreeSelect extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    axios.post('/add',{
      data:{
        id:1,
        title:'title'
      }
    }).then(res=>{
      console.log(res,'post---res');
    })
  }
  render() {
    const { treeData } = this.state;
    return (
      <div>
        <h1>123</h1>
      </div>
    );
  }
}