前言
本节我们将通过redux中间件，用ajax方法对服务器取得数据，用到的包：
- superagent:封装了ajax方法
- http-proxy:解决跨域ajax问题
配置
helpers/ApiClient.js
对superagent进行重新封装，以适应我们应用需要，这里就不贴代码了。
redux/middleware/clientMiddleware.js promise中间件，用于获取服务器数据。
redux/modules/info.js inforBar的reducer文件，主要是action,types
components/InfoBar/InfoBar.js, container/App/App.js有部分修改，这里就不做说明了。
注意：添加新的组件和中间件，要将他们添加到redux/create，redux/modules/reducers.js中
最后在package.json,中添加命令,同时启动APP 与 API SERVER
"dev": "concurrently --kill-others \"npm run start-dev\" \"npm run start-api\""
好了完成以上工作后，启动命令npm run dev,然后访问http://localhost:3000,我们的infobar出现在我们页面的底部。点击后发现并没有出现我们想要的服务器数据，打开chrome的调试工具发现，是不允许我们访问3030，出现跨域的问题，这里我们用代理服务来解决
代理服务
修改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')))
//代理服务器
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代理服务器后，要把将action中的promise,指向代理服务器，然后再次运行，访问出现服务器时间。
Next
服务器数据异步取得
