antd pro v2模拟数据切换

在antd pro中使用了mock数据,好处是只需要跟后端开发人员沟通好数据格式而并不需要等他们写好接口。我们在antd pro中看到所有的接口都是mock数据，那么问题来了我们怎么切换成真实接口呢？

在config.js中我们看到有一段proxy的代码是被注释的，我们只需要删除注释，然后我们修改如下

  proxy: {
    '/realserver': {
      target: 'https://www.xxxxxx.com:8888/',
      changeOrigin: true,
      pathRewrite: { '^/realserver': '' },
    },
  },

pathRewrite的意思是就算你真实api没有这个我们也可以替换，比如你接口为/login/user,在你调用接口时你可以写为/realserver/login/user它可以帮你把realserver去掉这样可以方便区分是真实接口还是mock。

所以我们修改service为

export async function fakeAccountLogin(params) {
  console.log(params)
  return request('/realserver/users/login', {
    method: 'POST',
    data: params,
  });
}

顺便我们可以修改下model里的login确认我们需要传递的所有参数

    *login({ payload }, { call, put }) {
      console.log(payload)
      const response = yield call(fakeAccountLogin, payload);
      let resObj = {}
      if(response.code === 500){
        resObj.status = 'error';
        resObj.currentAuthority = 'guest'
      }
      if(response.token){
        resObj.status = 'ok';
        resObj.currentAuthority = 'admin';
      }
      yield put({
        type: 'changeLoginStatus',
        payload: Object.assign(response, resObj),
      });
      // Login successfully
      if (response.status === 'ok') {
        reloadAuthorized();
        const urlParams = new URL(window.location.href);
        const params = getPageQuery();
        let { redirect } = params;
        if (redirect) {
          const redirectUrlParams = new URL(redirect);
          if (redirectUrlParams.origin === urlParams.origin) {
            redirect = redirect.substr(urlParams.origin.length);
            if (redirect.match(/^\/.*#/)) {
              redirect = redirect.substr(redirect.indexOf('#') + 1);
            }
          } else {
            redirect = null;
          }
        }
        yield put(routerRedux.replace(redirect || '/'));
      }
    },

然后我们直接yarn start就算我们不删除mock里面的接口也无所谓因为会优先匹配realserver。

image.png

所以我们就可以很轻松的切换mock和真实数据了。