dva和Umi中两个小用法

284 阅读3分钟

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 在这里插入图片描述

项目中使用

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