dva中proxy和effects的简单应用

简单应用"/>

dva中proxy和effects的简单应用

一、加入代理proxy

//当我们在进行连接后端接口的时候，当后端的域名和前端对应不上的时候，我们需要进行跨域操作，需要应用代理，我们可以在umirc中加入代理

  proxy:{"/api":{target:"http://localhost:3000/",changeOrigin:true,pathRewrite:{"^/api":""},}

其中， target是域名转换，pathRewrite是路径重写，在后边把api转换为空字符串

二、加入域名后路径

然后我们在src文件夹下新建api文件夹，在下边建立新文件，在终端中通过npm install axios安装axios并在文件开始引入axios，然后后边把域名后边的路径补充上，这里的api会被代理转换为空字符串。

import axios from 'axios';export const getAllUsers = ()=>{return axios.get("/api/users");
};

三、在模块中写入effecs以及其他

在模块中引入我们写好的文件，用state存储用户信息，每一个effects函数可以传入两个参数，

第一个参数为action对象（可以灵活运用解构赋值），第二个参数为context对象放入call和put方法

call/apply用来执行异步任务的方法，put可以查询状态,以及执行reducers函数的方法，在effects函数，每次调用call/put或者其他方法，都需要使用yield修饰。call中第一个参数为执行异步操作的函数，剩下的为执行异步操作的函数的参数

import { getAllUsers } from "../api";
export default {state: [],reducers: {setUsers(state, { users }) {return users;},},effects: {*fetchAllUsers(action, { call, put }) {var res = yield call(getAllUsers);console.log(res);},},
};

四、在主页加上跳转以及在umirc中加入路由路径

路径：

  routes: [{path: '/',redirect: '/home',},{name: '首页',path: '/home',component: './Home',},{name:'用户列表',path:'/users',component:"./Users"}

跳转：

<Link to='/users'>去用户管理</Link>

记得使用页面跳转Link之前记得从umi中引入link