ant design pro入门（2）
迟迟没有更新，很大一部分原因是我目前没有深入研究里面用到的dva, redux，webpack等技术。仅停留在用组件堆积页面的程度，怕误人子弟，想到自己遇到问题在网上寻找答案，太多的复制粘贴，主要你复制粘贴也就罢了，关键是不起作用的内容。
上节说了假数据，这次想写一下真实的服务器请求，获得数据，渲染页面等。 (例子来源于工作，有些问题没有解决，我也会说明。希望有解决方案的人告知，多谢多谢)
发送请求
上次讲到在api.js中发送请求，模拟了假数据，这次讲一下调用真实接口进行请求并渲染页面。
先完整的过一遍请求吧
首先view层发送请求例如下面的代码：
componentDidMount() {
this.fetchListCallback();
}
fetchListCallback = () => {
const { limit, offset } = this.state;
const { dispatch } = this.props;
dispatch({
type: 'brandDiscountManage/fetchList',
payload: {
limit,
offset,
},
callback: (response)=>{
this.setState({
tableData: common(response.data.rows, 'discountId'),
})
},
})
};
这里调用了'brandDiscountManage'命名空间下的 fetchList 方法。
另外需要在路由层配置一下，引用的文件。
'/brandDiscountManage': {
component: dynamicWrapper(app, ['brandDiscountManage'], () => import('../routes/brand/DiscountManage/index')),
},
如上代码显示，这里用到了brandDiscountManage.js。其中的文件内容如下
(effects里面就是用到的一些处理请求方法)
import { responseErrorMsg } from '../assets/common'
import { getDiscountList } from '../services/api';
export default {
namespace:'brandDiscountManage',
state:{
},
effects: {
*fetchList({payload, callback}, {call}) {
const response = yield call(getDiscountList, payload)
if(responseErrorMsg(response) && callback ){
callback(response);
}
},
},
reducers: {
},
}
这样在看上面的代码就知道，页面一进来就调用了fetchList方法。这个方法里面调用了yield call (函数名， payload参数)这个方法（暂时不太懂实现原理，一笔带过），并把响应值response 返回。然后判断有没有错误，有的话 responseErrorMsg 这个函数里面做了处理，没有错误的话并且存在callback就会调用callback，并把response作为参数传送。
接着看getDiscountList这个函数函数里面做了什么，这个函数存在于'../services/api.js'文件夹里面
看代码
export async function getDiscountList(params) {
return request('/jiuyue/discount/discountList', {
method: 'POST',
body: {
sort: 'create_dts',
order: 'DESC',
...params,
},
});
}
这里调用的是真实借口，话说真实的借口应该是域名+地址，这里面只有地址，别急，这里面用到了代理。实际上，在刚开始做的时候我直接把网址放到这个request后面，发现上个公司的测试环境的请求地址http:....是可以访问的，然后当我把现在公司的开发环境的全部地址放上去时候报错了，找不到这个借口，我不知道怎么回事。最终解决方案是用到了上面说的代理。ant design pro用到了webpack环境可以配置代理。
具体是在 .webpackrc.js 文件中，
具体代码如下
const path = require('path');
export default {
entry: 'src/index.js',
extraBabelPlugins: [
['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
],
env: {
//开发环境
development: {
extraBabelPlugins: ['dva-hmr'],
},
// build 时的生产环境
production: {
'extraBabelPlugins': [
'transform-runtime',
'transform-decorators-legacy',
['import', { 'libraryName': 'antd', 'style': true }],
],
},
},
//设置代理请求
proxy: {
'/jiuyue': {
"target": "http://jiuyue.raykoon.com",
"changeOrigin": true,
"pathRewrite": { "^/jiuyue" : "" }
}
},
alias: {
components: path.resolve(__dirname, 'src/components/'),
},
ignoreMomentLocale: true,
theme: './src/theme.js',
html: {
template: './src/index.ejs',
},
//
disableDynamicImport: true,
//如果你的静态资源域名和应用域名不同（例如独立的 cdn 地址），你需要在 .webpackrc 文件里用 publicPath 对生产环境的静态路径进行配置。
publicPath: '/',
hash: true,
};
上面就是我的源文件，相信也没有什么值得屏蔽的，代理主要用的 proxy 这个属性的配置。
如果你刚才细心的话就会发现我刚才request后面的借口前面有一个 /jiueyu 这个前缀，在这个代理这里做了处理，它的大致意思就是说遇到带有 /jiuyue的网址，就作处理，域名重定向到 http://jiuyue.raykoon.com 这个域名下，并且把 /jiuyue前面全部替换成""
具体一点就是，你本地打开的是 http://localhost:8000 域名，访问的时候控制台发送的请求是
image
你会看到请求地址是 http://localhost:8000/jiuyue/discount/discountList，
然而实际上调用的接口全地址是：
http://jiuyue.raykoon.com/discount/discountList
这样就是实现的接口的代理请求，数据的获取，页面的渲染。
fetchListCallback = () => {
const { limit, offset } = this.state;
const { dispatch } = this.props;
dispatch({
type: 'brandDiscountManage/fetchList',
payload: {
limit,
offset,
},
callback: (response)=>{
this.setState({
tableData: common(response.data.rows, 'discountId'),
})
},
})
};
最初的那个callback就取到了数据进行setState相关数据，处理页面。。。
网友评论