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