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值了

目录
相关文章
umi项目中使用recoil替换dva
本文介绍使用recoil库来在umi项目中进行组件间的状态共享,部分替换dva的功能。
762 0
|
7月前
Vue3+Vite+Js项目搭建之三:vue-router 路由构建
Vue3+Vite+Js项目搭建之三:vue-router 路由构建
226 1
|
7月前
umi的函数
umi的函数
60 0
|
7月前
|
前端开发 JavaScript 架构师
react+typescript+umi+dva+antd
react+typescript+umi+dva+antd
117 0
|
JavaScript 网络架构
【Vue】vue项目搭建、ES6的简单使用(大觅)
【Vue】vue项目搭建、ES6的简单使用(大觅)
344 0
【Vue】vue项目搭建、ES6的简单使用(大觅)
|
前端开发 JavaScript
Vue3+Vite简单使用
Vue3+Vite简单使用
90 0
|
JavaScript 前端开发 开发者
【Vue2从入门到精通】详解Vue.js的15种常用指令及其使用场景
Vue.js 是一款流行的前端框架,它通过指令(Directive)实现了对 DOM 元素的控制,使得开发者能够更加方便地管理页面的展示和交互。
152 0
【Vue2从入门到精通】详解Vue.js的15种常用指令及其使用场景
|
JavaScript IDE API
vue3的setup的使用和原理解析
vue3的setup的使用和原理解析
340 1
|
JavaScript 前端开发
vue中mixins的使用方法和注意点
vue中mixins的使用方法和注意点
|
资源调度 前端开发 JavaScript
ant-design-vue+vite主题切换详细步骤(简单案例)
ant-design-vue+vite主题切换详细步骤(简单案例)
922 0