Dva使用Mock模拟数据

一、fetch请求简单的封装

1、在utils文件夹下创建config.js文件，utils/config.js ，对fetch请求路径进行配置

//config.js文件

const config = {
  apiUrl: process.env.NODE_ENV === 'development' ? ' http://127.0.0.1:7001' : 'https://www.baidu.com',
  apiPrefix: ' http://127.0.0.1:7001',
  proxy: true  //是否开启mock代理
};

export default config;

2、简单封装fetch请求，utils文件夹下的request.js文件

//request.js文件

import fetch from 'dva/fetch';
import config from './config';

function parseJSON(response) {
  return response.json();
}

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }

  const error = new Error(response.statusText);
  error.response = response;
  throw error;
}

const assyParams = (obj) => {
  let str = ''
  for (let key in obj) {
    const value = typeof obj[key] !== 'string' ? JSON.stringify(obj[key]) : obj[key]
    str += '&' + key + '=' + value
  }
  return str.substr(1)
}

/**
 * Requests a URL, returning a promise.
 *
 * @param  {string} url       The URL we want to request
 * @param  {object} [options] The options we want to pass to "fetch"
 * @return {object}           An object containing either "data" or "err"
 */
export default function request(obj) {
  let url = '';
  let options = {
    method: obj.method,
    headers: {
      'Content-Type': 'application/json; charset=utf-8',
    },
    credentials: 'include'	 //是否携带cookie，默认为omit不携带; same-origi同源携带; include同源跨域都携带
  };
  if (obj.method === 'GET' || obj.method === 'get') {
    url = (config.proxy ? obj.url : config.apiUrl + obj.url) + '?' + assyParams(obj.data);
  }
  if (obj.method === 'POST' || obj.method === 'post') {
    url = config.proxy ? obj.url : config.apiUrl + obj.url;
    options.body = JSON.stringify(obj.data);
  }
  return fetch(url, options)
    .then(checkStatus)
    .then(parseJSON)
    .then(data => ({ data }))
    .catch(err => ({ err }))
}

二、写api

1、service文件下创建api.js

//api.js文件

import request from '../utils/request';

//获取用户信息
export function dataInfo(params) {
  return request({
    url: '/userInfo',
    method: 'post',
    data: params
  })
}

三、mock相关配置

1、例如需要模拟用户列表数据，可以在mock文件夹下新建user.js文件

//user.js文件

import Mock from 'mockjs';
import { delay } from 'roadhog-api-doc';

const proxy = {
  'POST /userInfo': (req, res) => {
	res.setHeader('Access-Control-Allow-Origin', '*');
	res.send(Mock.mock({
	  code: 700,
	  msg: '请求成功',
	  data: {
		id: '1',
		tel: '18888888888',
		sex: '男',
		name: '张无忌',
		sign: '中国广州',
		nickname: 'apple',
		email: '111111111@qq.com', 
		update_time: '',
	  }
	}));
  }
 };

// 调用 delay 函数，统一处理
export default delay(proxy, 1000);

2、 .roadhogrc.mock.js 中进行导入

//.roadhogrc.mock.js文件，加载mock的数据，通过循环把在mock文件夹下的所有配置文件都拿到，并最后export出去

const fs = require('fs');
const path = require('path');

const mockPath = path.join(__dirname + '/mock');

const mock = {};
fs.readdirSync(mockPath).forEach(file => {
  Object.assign(mock, require('./mock/' + file));
});

export default mock;

4、调用api发送请求

1、例如在routes文件下的IndexPage.js页面发送请求

import React, { Component } from 'react';
import styles from './IndexPage.css';
import { dataInfo } from '../services/api';

class IndexPage extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  fetchInfo = async () => {
    const data = await dataInfo({ id: 1 });
    console.log(data);
  }

  render() {
    return (
      <div className={styles.normal}>
        <h1 className={styles.title}> 首页</h1>
        <button onClick={this.fetchInfo}>获取用户信息</button>
      </div>
    )
  }
}

export default IndexPage;

请求结果