dva和Umi中两个小用法

简介: dva和Umi中两个小用法

Umi中的Proxy跨域代理



官网中给的例子


export default {
  proxy: {
    '/api': {
      'target':'http://jsonplaceholder.typicode.com/',
      'changeOrigin': true,
      'pathRewrite': {'^/api':'' },
    },
  },
}
proxy: {
      // api表示的是在/api路径下开启代理
    '/api': {
      //target表示的是要替换的地址
      'target':'http://jsonplaceholder.typicode.com/',
      'changeOrigin': true,
      //将api开头替换为空
      'pathRewrite': {'^/api':'' },
    },
  },


实际使用


在config文件夹下的config.js项目中使用

image.png

  proxy: {
    "/ci": {
      "target": "http://47.92.112.6:8055",
      "changeOrigin": true,
      "pathRewrite": { "^/ci": ''}
    }
  }


比如 我在本地访问的是

http://localhost:8000/ci/player/page?current=2&size=10

进入ci路径下会自动开启代理 将http://localhost:8000替换成了http://47.92.112.6:8055此时我访问的就是

http://47.92.112.6:8055/ci/player/page?current=2&size=10

但是我应该访问的是

http://47.92.112.6:8055/player/page?current=2&size=10

所以这时候要进行路径重写,将ci替换为空就可以成功访问


正向代理


正向代理就是一个位于客户端和目标服务器之间的服务器,这是一个代理服务器

客户端为了从目标服务器获取内容,但是客户端由于限制无法直接访问到目标服务器,那么客户端就可以向一个代理服务器发送一个请求并指定目标服务器

代理服务器收到请求后,就会向目标服务器转交请求并将获得的内容返回给客户端


image.png


正向代理用途


  • 突破访问显示:通过代理服务器,可以突破自身ip访问限制,访问国外网站等
  • 提高访问速度:通常代理服务器都设置一个较大的硬盘缓冲区,会将部分请求的响应保存到缓冲区中,当其他用户再访问相同的信息时,则直接由缓冲区中取出信息,传给用户,以提高访问速度
  • 隐藏客户端真实ip:上网者可以通过正向代理的方法隐藏自己的ip,免受攻击


Dva中在effects中获取state的值



首先,看官网给出effects中的例子 effects详情见


it('put multi effects in order', done => {
    const app = create();
    app.model({
      namespace: 'counter',
      state: {
        count: 0,
        resolveCount: 0,
      },
      reducers: {
        dump(state, { payload }) {
          return {
            ...state,
            ...payload,
          };
        },
      },
      effects: {
        *changeCountDelay({ payload }, { put, call }) {
          yield call(delay, 200);
          yield put({ type: 'dump', payload: { count: payload } });
        },
        *process({ payload }, { put, select }) {
          yield put.resolve({ type: 'changeCountDelay', payload });
          const count = yield select(state => state.counter.count);
          yield put({ type: 'dump', payload: { resolveCount: count } });
        },
      },
    });


从这个例子我们可以看出

在effects中想要获得state中的值,需要解构出select方法


用法具体如下

const xxx = yield select( state => state.namespcae(你自己起的命名空间).想要取得的值)


运用


export default {
  namespace: 'CWL_UserSettingsModel',
  state: {
    pagination:{},
    userData: [],
    userInfo: {},
  },
  effects: {
    *addUser({payload},{call,put,select}){
      console.log('addUser',payload);
     const pagination = yield select(state => state.CWL_UserSettingsModel.pagination)
      const response = yield call (UserSettingService.addUser,payload)
      const {code} = response;
      if (response.code === 0) {
        message.success('新增用户成功');
        yield put({
          type: 'getList',
          payload: pagination,
        });
      }
      else{
        message.error("新增用户失败");
      }
    }
  },


通过这句话取到了state中pagination的值

const pagination = yield select(state => state.CWL_UserSettingsModel.pagination)


另外,如果你想在model中取到另一个model中state值,我们可以举一反三一下,只要在后面添加上你想取的model的namespace的值即可


比如:我想一个model中取到globalModel中的值

const globalModelData = yield select((state) => state.globalModel);


这样,我们就可以在一个Model中取到globalModel中的state值了

目录
相关文章
|
5月前
|
JavaScript
vue3-在自定义hooks使用useRouter 报错问题
vue3-在自定义hooks使用useRouter 报错问题
120 0
umi项目中使用recoil替换dva
本文介绍使用recoil库来在umi项目中进行组件间的状态共享,部分替换dva的功能。
696 0
|
24天前
umi的函数
umi的函数
25 0
|
2月前
|
前端开发 JavaScript 架构师
react+typescript+umi+dva+antd
react+typescript+umi+dva+antd
29 0
|
9月前
|
存储 前端开发 JavaScript
React自定义Hooks
React自定义Hooks是一项强大而实用的功能,它可以帮助开发者将逻辑和状态从组件中抽离出来,提高组件的可复用性和逻辑抽象能力。本论文将介绍React自定义Hooks的定义、使用方法和设计原则,分析其对函数式组件的优化作用,并通过实例演示了如何使用自定义Hooks提高组件性能、重用逻辑和实现逻辑的解耦。
295 2
|
10月前
|
缓存 前端开发 JavaScript
react之自定义hooks
任何相对独立、复用性强的逻辑,都可以 extract 为自定义 Hook,自定义 Hook 是一种复用 React 的状态逻辑的函数。
141 0
|
JavaScript 网络架构
【Vue】vue项目搭建、ES6的简单使用(大觅)
【Vue】vue项目搭建、ES6的简单使用(大觅)
267 0
【Vue】vue项目搭建、ES6的简单使用(大觅)
|
11月前
|
存储 缓存 JavaScript
react-hooks如何使用?
彻底弄清楚 react-hooks 如何使用
|
11月前
dva创建应用和使用antd中报错解决方案
dva创建应用和使用antd中报错解决方案
65 0