ant design pro入門（2）

遲遲沒有更新，很大一部分原因是我目前沒有深入研究里面用到的dva, redux，webpack等技術。僅停留在用組件堆積頁面的程度珍手，怕誤人子弟，想到自己遇到問題在網(wǎng)上尋找答案，太多的復制粘貼琳要，主要你復制粘貼也就罷了寡具，關鍵是不起作用的內(nèi)容。

上節(jié)說了假數(shù)據(jù)稚补，這次想寫一下真實的服務器請求童叠，獲得數(shù)據(jù)，渲染頁面等孔厉。 (例子來源于工作拯钻，有些問題沒有解決，我也會說明撰豺。希望有解決方案的人告知粪般，多謝多謝)

發(fā)送請求

上次講到在api.js中發(fā)送請求，模擬了假數(shù)據(jù)污桦，這次講一下調用真實接口進行請求并渲染頁面亩歹。

先完整的過一遍請求吧

首先view層發(fā)送請求例如下面的代碼：

 componentDidMount() {
    this.fetchListCallback();
  }

  fetchListCallback = () => {
    const { limit, offset } = this.state;
    const { dispatch } = this.props;
    dispatch({
      type: 'brandDiscountManage/fetchList',
      payload: {
        limit,
        offset,
      },
      callback: (response)=>{
        this.setState({
          tableData: common(response.data.rows, 'discountId'),
        })
      },
    })
  };

這里調用了'brandDiscountManage'命名空間下的 fetchList 方法。
另外需要在路由層配置一下凡橱，引用的文件小作。

'/brandDiscountManage': {
  component: dynamicWrapper(app, ['brandDiscountManage'], () => import('../routes/brand/DiscountManage/index')),
},

如上代碼顯示，這里用到了brandDiscountManage.js稼钩。其中的文件內(nèi)容如下
(effects里面就是用到的一些處理請求方法)

import { responseErrorMsg } from '../assets/common'
import { getDiscountList } from '../services/api';

export default {

  namespace:'brandDiscountManage',

  state:{

  },

  effects: {
    *fetchList({payload, callback}, {call}) {
      const response = yield call(getDiscountList, payload)
      if(responseErrorMsg(response) && callback ){
        callback(response);
      }
    },
  },

  reducers: {

  },
}

這樣在看上面的代碼就知道顾稀，頁面一進來就調用了fetchList方法镣陕。這個方法里面調用了yield call (函數(shù)名包竹， payload參數(shù))這個方法（暫時不太懂實現(xiàn)原理，一筆帶過）严衬，并把響應值response 返回巡李。然后判斷有沒有錯誤抚笔，有的話 responseErrorMsg 這個函數(shù)里面做了處理，沒有錯誤的話并且存在callback就會調用callback侨拦，并把response作為參數(shù)傳送殊橙。
接著看getDiscountList這個函數(shù)函數(shù)里面做了什么，這個函數(shù)存在于'../services/api.js'文件夾里面

看代碼

export async function  getDiscountList(params) {
  return request('/jiuyue/discount/discountList', {
    method: 'POST',
    body: {
      sort: 'create_dts',
      order: 'DESC',
      ...params,
    },
  });
}

這里調用的是真實借口狱从，話說真實的借口應該是域名+地址膨蛮，這里面只有地址，別急季研，這里面用到了代理敞葛。實際上，在剛開始做的時候我直接把網(wǎng)址放到這個request后面训貌，發(fā)現(xiàn)上個公司的測試環(huán)境的請求地址http:....是可以訪問的，然后當我把現(xiàn)在公司的開發(fā)環(huán)境的全部地址放上去時候報錯了，找不到這個借口递沪，我不知道怎么回事豺鼻。最終解決方案是用到了上面說的代理。ant design pro用到了webpack環(huán)境可以配置代理款慨。
具體是在 .webpackrc.js 文件中儒飒，
具體代碼如下

const path = require('path');

export default {
  entry: 'src/index.js',
  extraBabelPlugins: [
    ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
  ],
  env: {
    //開發(fā)環(huán)境
    development: {
      extraBabelPlugins: ['dva-hmr'],
    },
    // build 時的生產(chǎn)環(huán)境
    production: {
      'extraBabelPlugins': [
        'transform-runtime',
        'transform-decorators-legacy',
        ['import', { 'libraryName': 'antd', 'style': true }],
      ],
    },
  },
  //設置代理請求
  proxy: {
    '/jiuyue': {
      "target": "http://jiuyue.raykoon.com",
      "changeOrigin": true,
      "pathRewrite": { "^/jiuyue" : "" }
    }
  },
  alias: {
    components: path.resolve(__dirname, 'src/components/'),
  },
  ignoreMomentLocale: true,
  theme: './src/theme.js',
  html: {
    template: './src/index.ejs',
  },
  //
  disableDynamicImport: true,
  //如果你的靜態(tài)資源域名和應用域名不同（例如獨立的 cdn 地址），你需要在 .webpackrc 文件里用 publicPath 對生產(chǎn)環(huán)境的靜態(tài)路徑進行配置檩奠。
  publicPath: '/',
  hash: true,
};

上面就是我的源文件桩了，相信也沒有什么值得屏蔽的，代理主要用的 proxy 這個屬性的配置埠戳。
如果你剛才細心的話就會發(fā)現(xiàn)我剛才request后面的借口前面有一個 /jiueyu 這個前綴井誉，在這個代理這里做了處理，它的大致意思就是說遇到帶有 /jiuyue的網(wǎng)址整胃，就作處理颗圣，域名重定向到 http://jiuyue.raykoon.com 這個域名下，并且把 /jiuyue前面全部替換成""
具體一點就是屁使，你本地打開的是 http://localhost:8000 域名在岂，訪問的時候控制臺發(fā)送的請求是

image

 fetchListCallback = () => {
    const { limit, offset } = this.state;
    const { dispatch } = this.props;
    dispatch({
      type: 'brandDiscountManage/fetchList',
      payload: {
        limit,
        offset,
      },
      callback: (response)=>{
        this.setState({
          tableData: common(response.data.rows, 'discountId'),
        })
      },
    })
  };

最初的那個callback就取到了數(shù)據(jù)進行setState相關數(shù)據(jù)酬蹋，處理頁面及老。。除嘹。