前言

本節(jié)我們將通過redux中間件，用ajax方法對(duì)服務(wù)器取得數(shù)據(jù)，用到的包：

• superagent:封裝了ajax方法
• http-proxy:解決跨域ajax問題

配置

helpers/ApiClient.js
對(duì)superagent進(jìn)行重新封裝，以適應(yīng)我們應(yīng)用需要，這里就不貼代碼了。

redux/middleware/clientMiddleware.js promise中間件，用于獲取服務(wù)器數(shù)據(jù)。

redux/modules/info.js inforBar的reducer文件，主要是action,types

components/InfoBar/InfoBar.js, container/App/App.js有部分修改，這里就不做說明了。

注意：添加新的組件和中間件，要將他們添加到redux/create，redux/modules/reducers.js中

最后在package.json,中添加命令,同時(shí)啟動(dòng)APP 與 API SERVER
"dev": "concurrently --kill-others \"npm run start-dev\" \"npm run start-api\""

好了完成以上工作后，啟動(dòng)命令npm run dev,然后訪問http://localhost:3000,我們的infobar出現(xiàn)在我們頁面的底部。點(diǎn)擊后發(fā)現(xiàn)并沒有出現(xiàn)我們想要的服務(wù)器數(shù)據(jù)，打開chrome的調(diào)試工具發(fā)現(xiàn)，是不允許我們?cè)L問3030，出現(xiàn)跨域的問題，這里我們用代理服務(wù)來解決

代理服務(wù)

修改src/server.js添加如下代碼

...
import httpProxy from 'http-proxy'
const targetUrl = 'http://' + appConfig.apiHost + ":" + appConfig.apiPort;
const proxy = httpProxy.createProxyServer({
  target:targetUrl
})
...

app.use(express.static(path.join(__dirname,'../public')))

//代理服務(wù)器
app.use('/api',(req, res) =>{
  proxy.web(req, res, {target: targetUrl})
})

proxy.on('error', (error, req, res) => {
  let json;
  if (error.code !== 'ECONNRESET') {
    console.error('proxy error', error);
  }
  if (!res.headersSent) {
    res.writeHead(500, {'content-type': 'application/json'});
  }

  json = {error: 'proxy_error', reason: error.message};
  res.end(JSON.stringify(json));
});

...

注意：添加api代理服務(wù)器后，要把將action中的promise,指向代理服務(wù)器，然后再次運(yùn)行，訪問出現(xiàn)服務(wù)器時(shí)間。

Next

服務(wù)器數(shù)據(jù)異步取得