antd pro的底层基础框架使用的是dva,dva采用effect的方式来管理同步化异步

在dva中主要分为3层 services  models  components

models层用于存放数据以及对数据进行操作,services层调用请求后台接口的方法,components层用于书写页面逻辑代码

services层

import request from '@/utils/request';

export async function doit(payload) {

  const {id} = payload;

  let url = `/api/v2/.../${id}`;

  return request(url,{

    mode: 'cors',

    method: 'GET',

  })

    .then(res => {

      return res;

    })

    .catch(err => console.log(err));

}

models层中的effects是与后台交互、处理数据逻辑的地方

import {doit} from '../../'

export default {

  namespace: 'test',

  effects: {

    *fetchNum ({payload,callback},{call,put}) {

      const res = yield call (doit,payload)

      //doit是引入services层那个js文件的doit方法,payload是后台要求传递的参数,res就是后台返过来的数据

      yield put ({

        type: 'addNum', //这就是reducer的addNum方法,put用来出发reducer中的方法,payload是传过去的参数。同时也能触发同等级effects中的方法

        payload: {

           num: res.data    //把后台返回的数据赋值给num,假如哪个reducer中的方法是由这里effects去触发的,哪个num名必须是这里的名字num,如果reducer中的方法不是这触发,那名字可以随意取

        }

      })

    }

  }

  reducers: {

    addNum (state,{payload:{num}}) {

      return {...state,num}

     }

  }

}

components层

页面如果需要使用models层的数据,要用connect进行连接,即在页面在引入import {connect} from 'dva';@connect(state => ({test:state.test})) 通过this.props获取数据

this.props.dispatch({

  type: 'test/fetchNum',   test对应models层的命名空间namespace

  payload: {

    numCount: ++1

  }

})

使用mock数据主要包括以下几步:

1、添加mock接口

2、添加service文件

3、添加model(需引入service函数)

4、页面链接model

5、页面调用model中的effect函数

6、model中的effects通过reducer中的函数将数据返回到页面

7、页面通过this.props获取数据

具体操作就是在项目根目录下,mock文件夹中新建record.js文件,用于存放mock数据

export default {'GET /love/record':{message: 'Succeed',code:0,data: [{key: '1',Name: '违规操作',age: '口腔科',address: '人民医院',tags: '2019-03-21 12:56:12',questions: '温度'},{key: '2',Name: '违规操作',age: '皮肤科',address: '人民医院',tags: '2019-03-21 12:56:12',questions: '压力'},]}
}

然后在src目录下的services文件夹中新建一个record.js文件,用来创建请求数据的函数,框架已经为我们封装好了request函数(可能需要我们对request.js文件进行补充),我们可以直接进行使用

import request from '../utils/request' ;
export async function getRecord (payload) {return request('/love/record',{  //如果路径中有参数,需要用字符串模板进行拼接``  method: 'GET'}).then(res => {return res;}.catch(err => console.log(err))
}

src目录下的models文件夹是store文件夹,用来定义state

新建record.js文件

引入我们在services文件夹中创建的请求数据的函数

import { getRecord } from '../services/record' ;
export default {namespace: 'demo',state:{record: [],},effects: {*getRecord(payload,{call,put}) {const res = yield call(getRecord,payload)yield put({type: 'updateToView',payload:{record:res.data}});}},reducers: {updateToView(state, { payload }) {return {...state,...payload,}}}
}

最后在page页面中,通过this.props就可以得到我们想要的数据

import { connect } from 'dva' ;
@connect(state=> ({demo:state.demo
})
componentDidMount(){const { dispatch } = this.props;dispatch({//需要调用对于namespace下effects中的该函数 type: 'record/getRecord',  })
}
console.log(this.props)就可以得到结果
const { demo } = this.props

我的request.js文件

import fetch from 'dva/fetch';
import { message } from 'antd';
import { error } from '@/utils/error';
const checkStatus = response => {if (response.status >= 200 && response.status < 300) {return response;}const errortext = error[response.status] || response.statusText;let isLogin = response.url.search('/unsecure/login') != -1;if (response.status === 401) {if (isLogin) {message.error(`请求错误 ${response.status}: ${errortext}`);} else {console.log('gogogo')router.push('/user/login');}} else {if (!isLogin) {message.error(`请求错误 ${response.status}: ${errortext}`);}}return response;
};
export default function request(url, option) {//获取tokenlet token = localStorage.getItem('token');const options = {...option,headers: {'X-Authorization': token,'x-language': 'chinese',},};const newOptions = { ...options, credentials: 'include' };if (newOptions.method === 'POST' ||newOptions.method === 'PUT' ||newOptions.method === 'DELETE') {if (!(newOptions.body instanceof FormData)) {newOptions.headers = {Accept: 'application/json','Content-Type': 'application/json; charset=utf-8',...newOptions.headers,};if (newOptions.dataType != 'string') {newOptions.body = JSON.stringify(newOptions.body);}} else {newOptions.headers = {Accept: 'application/json',...newOptions.headers,};}}return (fetch(url, newOptions).then(checkStatus).then(response => {if (newOptions.responseType === 'blob') {return response.blob();}let type = typeof response;switch (type) {case 'object':return response.json();case 'string':return response.text();}return response.json();}).then(res => {return res;}).catch(e => { }));
}error.js文件
export default {40101: '再输错两次将锁住',40200: '用户不存在',200: '服务器成功返回请求的数据。',201: '新建或修改数据成功。',202: '一个请求已经进入后台排队(异步任务)。',204: '删除数据成功。',400: '发出的请求有错误,服务器没有进行新建或修改数据的操作。',401: '用户权限错误。',403: '权限信息错误。',404: '发出的请求针对的是不存在的记录,服务器没有进行操作。',406: '请求的格式不可得。',410: '请求的资源被永久删除,且不会再得到的。',422: '当创建一个对象时,发生一个验证错误。',500: '服务器发生错误,请检查服务器。',502: '网关错误。',503: '服务不可用,服务器暂时过载或维保。',504: '网关超时。',
}

  

转载于:https://www.cnblogs.com/luxiaot/p/11244434.html

antd pro中如何使用mock数据以及调用接口相关推荐

  1. 博图WINCC报表(SQL数据库的建立,TIA_wincc在数据库中保存和查询数据,调用Excel模板把数据保存到指定的位置)

    这里写目录标题 目录 一.概述 1.1 前言 1.2 主要功能 1.3 使用的软件 二. SQL server建库和建表 2.1.SQL server建库 2.2SQL server建表 三.建立wi ...

  2. antd.pro中表格的国际化处理

    antd.pro最近更新额V5版本,于是使用了最新的版本.V5版本抛弃了dva的数据流配置方式(狗头:原因就是配置太繁琐了,你要为每个module配置module文件,并且使用generator的方式 ...

  3. Antd pro中ProFormSelect使用initialValues

    最近使用antd pro写项目,其中有一个下拉框回显问题,原本挺简单的代码,但是就是回显对不上. 我给的值是id,想让其显示name,但是显示的确实id.. 正常的解决思路如下: 原代码代码如下: & ...

  4. Java 数据分批调用接口的正确姿势

    一.背景 现实业务开发中,通常为了避免超时.对方接口限制等原因需要对支持批量的接口的数据分批调用. 比如List参数的size可能为 几十个甚至上百个,但是假如对方dubbo接口比较慢,传入50个以上 ...

  5. python调用第三方接口获取数据_python调用接口,python接收post请求接口(附完整代码)...

    与Scala语言相比,Python有其独特的优势和广泛的应用,python调用接口,因此Spark也推出了PySpark,它在框架上提供了一个使用Python语言的接口,python接收post请求接 ...

  6. umi搭建react+antd项目(三)Mock 数据--模拟数据

    1.添加mockjs yarn add mockjs 2.在mock目录下新建test.js List|10,返回list,10条数据 @image,随机生成img的url链接,mock内置函数 im ...

  7. android 调用短信,android中可以通过两种方式调用接口发送短信

    第一:调用系统短信接口直接发送短信:主要代码如下: //直接调用短信接口发短信 SmsManager smsManager = SmsManager.getDefault(); List divide ...

  8. vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete)...

    vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete) 手把手式笔记 Axios配置 安装 axios ...

  9. Antd Pro V4 protable详解(ps:踩坑日记)

    Antd Pro V4 protable详解(ps:踩坑日记) 写在前面: 在这篇文章中,你会了解到: protable 中的cloumns属性详解 protable数据加载和处理(两种方法,直接使用 ...

最新文章

  1. 记住linux terminal下的快捷键,提高操作效率!
  2. 网络爬虫--之爬起校招信息代码
  3. 导出目录结构_Selenium Webdriver 3.X源码分析之核心目录结构
  4. Android 调用系统的分享[完美实现同一时候分享图片和文字]
  5. 【POJ - 2195】Going Home(二分图最优匹配,费用流 或 KM)
  6. 平衡二叉树的旋转_平衡二叉树的旋转
  7. Android中Webview自适应屏幕
  8. APISpace 通用文字识别OCR接口 免费好用
  9. ‘javah‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件
  10. windows2003r2下载
  11. 基于javaweb酒店信息管理系统、基于ssm/springboot的酒店预定系统
  12. Calendar获取当前日期,或前几天,或后几天的日期
  13. dell进入u盘启动模式_如何调整戴尔电脑硬盘模式设置U盘第一启动
  14. 山腰中的AMD,向前是唯一的选择
  15. QT:QBitArray
  16. 火车头采集器 采集https网站 以及网站cookie 避免 蜘蛛 爬虫 程序等
  17. [刷机交流]谷歌Pixel 2手机刷入官方安卓10工厂镜像图文详细教程
  18. Document.createEvent() 创建自定义事件
  19. linux服务端 完美世界 下载,【网游单机架设】【完美世界之荣耀与新生151v101一键端】【32位+64位】【永久】...
  20. 程序员要注意的健康问题

热门文章

  1. 安卓HTML中打开一个连接!点击跳转了,可以实现返回上一级的HTML的页面!
  2. Android热修复实现及原理
  3. android返回上一级代码,Android实践11 | 利用intent返回数据给上一级activity
  4. vscode remote 第三方库_分钟将vscode撸成小霸王
  5. 再探正则表达式c++-html中搜索url
  6. charles 代理手机连不上网_「技巧」不想接电话?这样可以让手机变成空号,还不影响上网...
  7. 【kafka】kafka 时间轮 TimingWheel
  8. 【算法】迪杰斯特拉算法 最短路径算法
  9. 【clickhouse】Port 9000 is for clickhouse-client program
  10. 95-36-020-ChannelHandler-ChannelHandler