上一篇是关于引入react,redux,antd的，项目已经可以正常运行了，但是拿到的都是定义的死数据。这篇文章讲一下配置代理，调mock数据。
简便起见，我使用的是Easy Mock，定义好mock数据，在项目中引入使用。
先说一下Easy Mock的使用方法，
创建一个项目，
创建好之后，进入刚才创建的这个项目
创建接口
并在左侧添加数据
创建好之后，就是要在项目中使用了。
webpack.config.js中设置
devServer中添加
2
3
4
5
6
7
8
2 proxy: {
3 "/api":{
4 changeOrigin: true,
5 target: "https://www.easy-mock.com/mock/5c24adb39a96a934e48de313"
6 }
7 }
8
上面写法会找到 /api/的接口，然后代理到target的路径上去
参考：https://www.webpackjs.com/configuration/dev-server/\#devserver-proxy
request中使用的方法是fetch
接口请求
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3const listData = res => ({
4 type: 'LIST_DATA',
5 payload: res
6});
7
8export const getTodoList = (params, fn) => async (dispatch) => {
9 try {
10 const result = await request('/api/change/list', {
11 method: 'GET',
12 data: params
13 });
14 await dispatch(listData(result.data));
15 fn();
16 } catch (error) {
17
18 }
19}
20
/api是必须要有的，会匹配找到以/api开始的接口，代理到target的路径上，访问数据的路径就是
https://www.easy-mock.com/mock/5c24adb39a96a934e48de313/api/change/list
基本都是可以拿到数据的，如果没有拿到，不要慌，一般都是路径上的问题，
request.js
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2 return requestDataProcess(url, options);
3}
4async function requestDataProcess(url, options) {
5 if (/post/i.test(options.method)) {
6 let { data } = options;
7 let body = null;
8 if (typeof data === 'string') {
9 body = data;
10 } else {
11 body = JSON.stringify(data);
12 }
13 options.body = body;
14 delete options.data;
15 }
16 let headers = {};
17 headers['Content-Type'] = 'application/json';
18 options.headers = headers;
19
20 const result = await fetch(url, options).then(res => res.json());
21 return result;
22}
23
24
我使用的是比较简单的代理，如果需要使用的复杂的，可以参考官网。
链接：实践webpack+es6+react+redux+antd构建项目(一) webpack配置
** **实践webpack+es6+react+redux+antd构建项目(二) react，redux，antd引入
实践webpack+es6+react+redux+antd构建项目(四) 区分dev和prod环境
项目github地址
关注我获取更多前端资源和经验分享
感谢大佬们阅读，希望大家头发浓密，睡眠良好，情绪稳定，早日实现财富自由~
