户户通行业网站,注册个小公司要交税吗,本地备份wordpress,衡水商城网站建设上文 React Dva项目中模仿网络请求数据方法 中#xff0c;我们用项目方法模拟了后端请求的数据 那么 今天我们就在models中尝试去使用一下这种异步获取数据的方法 之前 我们在文章 React Dva项目创建Model,并演示数据管理与函数调用 中已经接触过Model了 也可以理解为 它就是 …上文 React Dva项目中模仿网络请求数据方法 中我们用项目方法模拟了后端请求的数据 那么 今天我们就在models中尝试去使用一下这种异步获取数据的方法 之前 我们在文章 React Dva项目创建Model,并演示数据管理与函数调用 中已经接触过Model了 也可以理解为 它就是 Dva中的 redux 这里 我们在自己的Dva项目中 找到根目录下的 mock 下面创建filmData.js 参考代码如下
module.exports {GET /api/filmDataList:(req,res){const para req.query;console.log(para);res.send({state: 200,message: 请求成功,data: [{name: 午夜凶铃,describe: 《午夜凶铃》是日本地区最知名的恐怖片之一影片主导演是中田秀夫。本部影片在1998年的1月31日正式在日本地区上映影片的内容主要改编于由小说家铃木光司所写的同名小说。},{name: 咒怨,describe: 《咒怨》是日本地区的恐怖系列影视作品之一内容主要讲述了有怨气的人在死后会在之前所居住的地方长期停留进入到这些地方的人都会受到诅咒。本部影片上映的时间是2003年的1月25日。},{name: 死寂,describe: 《死寂》上映于2007年的3月16日是由温子仁作为总导演创作的一部恐怖电影。}]})}
}这个地方 我们上文也讲过 就是模仿接口放回的数据 这里 我们新用了一个 res 并输出了req.query 这是外面传进来的请求参数 我们输出看一下
然后 根目录下找到 .roadhogrc.mock.js 编写代码如下
import fs from fs;
import path from path;
const mock {}
fs.readdirSync(path.join(__dirname, mock)).forEach(function (file) {if (file.match(/\.js$/)) {Object.assign(mock, require(./mock/ file))}
})
export default mock;用读流的方式 将mock下所有的js文件读进来 包括我们刚刚写的filmData.js
然后在根目录找到src下的 services 下面的example.js定义一个函数 来调用我们写给filmData.js的/api/filmDataList接口 这里小改动 接收一个data对象参数 然后 用data里面的id 来做id路径参数 发送get请求 这样 我们的基础就打好啦
然后我们 在根目录下的src下的 models 创建一个文件 叫 AsynchSchedul.js 编写代码如下
import * as api from ../services/example;export default {namespace: AsynchSchedul,state: {},effects: {*getAsynchSchedulList({ payload }, { call, put }) { // eslint-disable-lineconst dataList yield call(api.getFilmData,payload);yield put({type: save,payload: dataList.data});return dataList.data},},
}我们先是引入了…/services/example中全部的东西 定义代理名叫api 然后 effects中写异步函数 这里 我们定义了一个getAsynchSchedulList yield 调用 然后call中两个参数 一个是我们要调用的异步函数 刚刚引入的api下的getFilmData payload就是其他地方调用getAsynchSchedulList需要传的参数 最后将 dataList.data 返回回去 然后 记得改一下src下的index.js 去调用我们的AsynchSchedul 然后 我们找一个组件 编写代码如下
import React from react;
import { connect } from react-redux;class Product extends React.Component {constructor(props) {super(props);this.state {}}getlistmin () {this.props.dispatch({type: AsynchSchedul/getAsynchSchedulList,payload: {id: 123}}).then(res {console.log(res);})}render() {return (divbutton onClick{this.getlistmin}HTTP请求/button/div)}
}export default connect()(Product);这样 当我们点击时 结果就输出了 但是细心的同学会发现 filmData.js中的
const para req.query;
console.log(para);没有输出啊 别急 在控制台呢 id值 和我们之前调用时传的就是一样的
